title: Flex vs multi-column for responsive masonry?
body: <p>I see a lot of people talking about this, but no correct answers. To achieve this responsive layout, where box4 tucks up under box2 instead of aligning with the top of box 3:</p>
  
  <p><a href="https://i.stack.imgur.com/VeSiA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VeSiA.png" alt="single column for mobile"></a>  <a href="https://i.stack.imgur.com/hGhG7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hGhG7.png" alt="2 column for desktop"></a></p>
  
  <pre><code>  &lt;div id="container"&gt;
      &lt;div id="box1"&gt;1&lt;/div&gt;
      &lt;div id="box2"&gt;2&lt;/div&gt;
      &lt;div id="box3"&gt;3&lt;/div&gt;
      &lt;div id="box4"&gt;4&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Multi-column layout insists on putting boxes 1 and 2 in the first column and 3 and 4 in the second column, instead of the preferred order (as in Jhey Tompkins' often-linked Medium post); and</p>
  
  <p>Flex insists on aligning box4 with the top of box3.</p>
  
  <p>So neither one works. I'm pretty sure this isn't impossible. What's the strategy?</p>