title: Change the direction flow of CSS columns
body: <p>So I have CSS like this:</p>
  <pre><code>#blogPosts{
      -moz-column-count: 3;
      -moz-column-gap: 10px;
      -webkit-column-count: 3;
      -webkit-column-gap: 10px;
      column-count: 3;
      column-gap: 10px;
      width: 100%; 
  }
  </code></pre>
  <p>and this creates 3 columns perfectly but when I gain another row the order seems to come out vertically like:</p>
  <pre><code>1,3,5
  2,4,6
  </code></pre>
  <p>Instead of what I am wanting as:</p>
  <pre><code>1,2,3
  4,5,6
  </code></pre>
  <hr />
  <h1>Important!</h1>
  <p>Another important attribute I need, is that there must be a set margin between every post vertically. So for example if you look at the table above if <code>2</code> is longer than <code>1</code>, the top of <code>4</code> will start <code>y</code> bellow 1 rather than: the <code>height of 2</code> + <code>y</code>.</p>
  <hr />
  <p>The HTML is like this:</p>
  <pre><code>&lt;div id=&quot;blogPosts&quot;&gt;
      &lt;div class=&quot;blog&quot;&gt;Content&lt;/div&gt;
      &lt;div class=&quot;blog&quot;&gt;Content&lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  <p>What can I do to fix this?</p>
  <hr />
  <p>I am happy for any solutions, even one that includes javascript/jquery</p>
  <hr />
  <p><a href="http://galleria.io/themes/folio/" rel="noreferrer">This</a> is the kind of thing I am after</p>
  <p><img src="https://i.stack.imgur.com/hvWpW.jpg" alt="enter image description here" /></p>