title: CSS columns with left-right flow
body: <p>Let's say I have a <code>div</code> which will contain a set of elements (divs), which may have different heights, but all of them will have the same width.</p>
  
  <p>I've achieved this currently with isotope + masonry, but since some browsers already support CSS3 multi-columns, I was hoping to have a only-CSS solution for these browsers, falling back to Javascript for the rest.</p>
  
  <p>This is the CSS I've been trying:</p>
  
  <pre><code>.div-of-boxes {
    -webkit-column-count: 3;
    -webkit-column-gap:   10px;
    -moz-column-count:    3;
    -moz-column-gap:      10px;
    column-count:         3;
    column-gap:           10px;
  }
  </code></pre>
  
  <p>However, this makes the flow of the elements to be top-down left-right. I'd like instead a left-right top-down flow. This is an example of what I'd like:</p>
  
  <pre><code>1 2 3
  4 5 6
  7 8 9
  </code></pre>
  
  <p>But this is what I get:</p>
  
  <pre><code>1 4 7
  2 5 8
  3 6 9
  </code></pre>
  
  <p>In <a href="https://stackoverflow.com/questions/12481337/flow-multi-column-elements-left-right-before-top-down">Flow multi-column elements left-right before top-down</a> something similar is asked, but I'm not satisfied with the answer, and it won't work with elements of different height. Is this possible at all with CSS columns, or is it a limitation?</p>