title: Html div elements not moving on page resize
body: <p>So I've got this grid created by div elements and what I need is that when I resize the browser the div elements should move down. I.e a 2 x 2 grid changes to a 1 x 4 grid. Currently nothing happens, the browser just moves over my content.</p>
  
  <p>I really don't have a clue since the 'table' needs to have a fixed size and so do the elements but the elements have to move when the browser size is too small.</p>
  
  <p>Html</p>
  
  <pre><code>&lt;div class="table"&gt;
     &lt;div class="element"&gt;
     &lt;/div&gt;
     &lt;div class="element"&gt;
     &lt;/div&gt;
     &lt;div class="element"&gt;
     &lt;/div&gt;
     &lt;div class="element"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.table 
  {
      font-size: 1.2em; 
      width: 800px; 
      margin: 0 auto; 
      height: 565px; 
      background-color: #f0f0ee;
   }
  
  .element 
  {
      font-size: 1.2em; 
      font-family: monospace; 
      width: 48%; 
      border: 3px solid #FFF; 
      padding: 5px; 
      height: 50%; 
      float:left;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/bfdffuvq/" rel="nofollow">https://jsfiddle.net/bfdffuvq/</a></p>