title: Can I order my CSS columns horizontally instead of vertically?
body: <p>Here is my code:    </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.column {
      column-count: 4;
      column-gap: 10px;
      -moz-column-count: 4;
      -moz-column-gap: 10px;
      -webkit-column-count: 4;
      -webkit-column-gap: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="column"&gt;
      &lt;div class="inner"&gt;1&lt;/div&gt;
      &lt;div class="inner"&gt;2&lt;/div&gt;
      &lt;div class="inner"&gt;3&lt;/div&gt;
      &lt;div class="inner"&gt;4&lt;/div&gt;
      &lt;div class="inner"&gt;5&lt;/div&gt;
      &lt;div class="inner"&gt;6&lt;/div&gt;
      &lt;div class="inner"&gt;7&lt;/div&gt;
      &lt;div class="inner"&gt;8&lt;/div&gt;
      &lt;div class="inner"&gt;9&lt;/div&gt;
      &lt;div class="inner"&gt;10&lt;/div&gt;
      &lt;div class="inner"&gt;11&lt;/div&gt;
      &lt;div class="inner"&gt;12&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The result is: <br />
  1    4    7    10 <br />
  2    5    8    11 <br />
  3    6    9    12 <br /></p>
  
  <p>What I want is: <br />
  1    2    3    4 <br />
  5    6    7    8 <br />
  9    10   11   12 <br /></p>
  
  <p>Is that possible? How should I make it?</p>