title: Media query not responding on window resize, but working in Chrome Dev tools
body: <p>So I'm trying to have a "list" (not an <code>html</code> 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 <code>html</code>:<br></p>
  
  <pre><code>    &lt;div class="gray-bg"&gt;
            &lt;!-- Item 1 --&gt;
              &lt;div class="flexbox-row"&gt;
                &lt;div class="sec-heading space-between"&gt;
                     &lt;img src="assets/images/header1Web.png" class="img-responsive" alt="Cinque Terre" usemap="#plus"&gt;
                &lt;map name="plus" id="plus"&gt;&lt;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" /&gt;&lt;/map&gt;
                &lt;/div&gt;
              &lt;!-- Item 2 --&gt;
                &lt;div class="sec-heading space-between"&gt;
                     &lt;img src="assets/images/header2Web.png" class="img-responsive" alt="Cinque Terre"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;!-- Item 3 --&gt;
              &lt;div class="flexbox-row"&gt;
                &lt;div class="sec-heading space-between"&gt;
               &lt;img src="assets/images/header3Web.png" class="img-responsive" alt="Cinque Terre"&gt;
               &lt;/div&gt;
            &lt;!-- Item 4 --&gt;
                &lt;div class="sec-heading space-between"&gt;
               &lt;img src="assets/images/header4Web.png" class="img-responsive" alt="Cinque Terre"&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Item 5 --&gt;
              &lt;div class="flexbox-row"&gt;
                &lt;div class="sec-heading space-between"&gt;
               &lt;img src="assets/images/header5Web.png" class="img-responsive" alt="Cinque Terre"&gt;
               &lt;/div&gt;
            &lt;!-- Item 6 --&gt;
                &lt;div class="sec-heading space-between"&gt;
               &lt;img src="assets/images/header6Web.png" class="img-responsive" alt="Cinque Terre"&gt;
               &lt;/div&gt;
               &lt;/div&gt;
      &lt;/div&gt;&lt;!-- / .gray-bg --&gt;
  </code></pre>
  
  <p>And here is the appropriate <code>CSS</code>:<br></p>
  
  <pre><code>.flexbox-row {
      display: block;
  }
  @media only screen and (min-device-width: 1446px) {
  .flexbox-row {
      display: flex;
  }}
  </code></pre>