title: css columns / flexbox with no gaps between items
body: <p>I need to get rid of gaps between elements in my column layout. I can use the latest css3 as the site is targeted at modern browsers/devices but I need to avoid a javascript solution such that the page as delivered from the server doesn't need to be re-rendered based on the width of the client.</p>
  
  <p>Using flexbox, css columns, and other tricks I need to coax a pinterest-like layout. (Pinterest uses javascript and absolute positioning for their layout, it doesn't even render with js turned off.) The site has boxes with a known width but variable height. The number of columns needs to vary based on browser width. (I can do this via media queries if I know what css attribute to change.) Here's what this looks like: <a href="http://the-echoplex.net/flexyboxes/">via</a></p>
  
  <p><img src="https://i.stack.imgur.com/S9pGk.png" alt="gaps"></p>
  
  <p>Also note that I can't just increase the height of the containers to fill the empty space. I want to bring the item below it UP, not make all the heights match. (So stretching items 1, 3, and 4 in the picture above is NOT what I want.)</p>
  
  <p>Things I've tried:</p>
  
  <ul>
  <li><p>CSS 3 columns. This looks great, but the items are in the wrong order, with the second item being under the first. If this can be changed to a different order such that they go left-to-right, great!</p></li>
  <li><p>Flexbox various flexbox configurations, I've tried just about every setting that I was able to change.</p></li>
  <li><p>Javascript. Yes, I know I can manually create columns and re-render them on resize. I'm looking to avoid an expensive re-render operation that requires a manual balancing of columns and display. I can resort to this for older browsers that don't support a css3 solution. I'm also wanting to avoid manually positioning all of the items. Gross.</p></li>
  </ul>
  
  <p>I've put a comment link to JSFiddle because I can't put it in here as "links to jsfiddle require code".</p>