Q:

Media query not responding on window resize, but working in Chrome Dev tools

So I'm trying to have a "list" (not an html list, but just 6 concurrent pictures in a logical fashion) of pictures that go down, but at a certain breakpoint, two move next to each other, and the media query is working in the Chrome dev tools and on Adobe Dreamweaver live preview on the phone, but on browser resize, the media query doesn't respond. Here is the html:
    <div class="gray-bg">
          <!-- Item 1 -->
            <div class="flexbox-row">
              <div class="sec-heading space-between">
                   <img src="assets/images/header1Web.png" class="img-responsive" alt="Cinque Terre" usemap="#plus">
              <map name="plus" id="plus"><area alt="" title="" href="#" shape="poly" coords="1904,371,1898,358,1890,351,1782,423,1917,426,1917,300,1891,321,1875,340,1803,401,1790,415,1782,418" /></map>
              </div>
            <!-- Item 2 -->
              <div class="sec-heading space-between">
                   <img src="assets/images/header2Web.png" class="img-responsive" alt="Cinque Terre">
              </div>
            </div>
          <!-- Item 3 -->
            <div class="flexbox-row">
              <div class="sec-heading space-between">
             <img src="assets/images/header3Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
          <!-- Item 4 -->
              <div class="sec-heading space-between">
             <img src="assets/images/header4Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
          </div>
          <!-- Item 5 -->
            <div class="flexbox-row">
              <div class="sec-heading space-between">
             <img src="assets/images/header5Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
          <!-- Item 6 -->
              <div class="sec-heading space-between">
             <img src="assets/images/header6Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
             </div>
    </div><!-- / .gray-bg -->

And here is the appropriate CSS:
.flexbox-row {
    display: block;
}
@media only screen and (min-device-width: 1446px) {
.flexbox-row {
    display: flex;
}}

A:

(min-device-width: 1446px) is different from (max-width: 1446px), min-device-width is checking if you have a screen width of 1446px while (max-width: 1446px) is if you have current width of 1446px. No matter how you resize it the screen width is still the same.
Hope that helps

