title: Responsive tile layout with flexbox
body: <p>I want to create a tile layout (similiar to the metro style tile layout or what it's called of Windows 8). So I have some tiles/boxes, some are quadratic, some can be twice the sice and quadratic and some can have twice the width. So far so good, but I have an issue with responsiveness which I thougt flexbox would solve for me... but maybe I was wrong.</p>
  
  <p>Currently the boxes are layouted like this (arrows show where boxes should "flow"):
  <a href="https://i.stack.imgur.com/DYf52.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DYf52.png" alt="enter image description here"></a></p>
  
  <p>But what I want it for them to look like this:
  <a href="https://i.stack.imgur.com/lc3nt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lc3nt.png" alt="enter image description here"></a></p>
  
  <p>Or even this, if a big tile is placed somewhere in the middle (note: numbering can also be a bit different, e.g. boxes on the left of the big tile could be from 1-4 and then the big tile could be number 5, if this is more easy to do):
  <a href="https://i.stack.imgur.com/bcC8f.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bcC8f.png" alt="enter image description here"></a></p>
  
  <p>This is the code I currently have (see <a href="http://codepen.io/anon/pen/oXmraK" rel="noreferrer">http://codepen.io/anon/pen/oXmraK</a>):</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="bigbox"&gt;Box 1&lt;/div&gt;
    &lt;div class="box"&gt;Box 2&lt;/div&gt;
    &lt;div class="box"&gt;Box 3&lt;/div&gt;
    &lt;div class="box"&gt;Box 4&lt;/div&gt;
    &lt;div class="box"&gt;Box 5&lt;/div&gt;
    &lt;div class="box"&gt;Box 6&lt;/div&gt;
    &lt;div class="box"&gt;Box 7&lt;/div&gt;
    &lt;div class="widebox"&gt;Box 8&lt;/div&gt;
    &lt;div class="box"&gt;Box 9&lt;/div&gt;
    &lt;div class="box"&gt;Box 10&lt;/div&gt;
    &lt;div class="box"&gt;Box 11&lt;/div&gt;
    &lt;div class="box"&gt;Box 12&lt;/div&gt;
    &lt;div class="box"&gt;Box 13&lt;/div&gt;
    &lt;div class="box"&gt;Box 14&lt;/div&gt;
    &lt;div class="box"&gt;Box 15&lt;/div&gt;
    &lt;div class="box"&gt;Box 16&lt;/div&gt;
    &lt;div class="box"&gt;Box 17&lt;/div&gt;
    &lt;div class="box"&gt;Box 18&lt;/div&gt;
    &lt;div class="box"&gt;Box 19&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.container {
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      align-items: stretch;
  }
  
  .box, .bigbox, .widebox {
    background-color: olive;
    width: 100px;
    height: 100px;
    margin: 5px;
  }
  
  .bigbox {
    background-color: olive;
    width: 210px;
    height: 210px;
  }
  
  .widebox {
    background-color: olive;
    width: 210px;
    height: 100px;
  }
  </code></pre>
  
  <p>Any ideas how to achieve the desired layout? Don't know if this is possible without JS but I hope it is.</p>