title: List items in columns from top to bottom instead of left to right
body: <p>I have a list of countries in alphabetical order like:</p>
  
  <pre class="lang-none prettyprint-override"><code>Albania
  Andorra
  Armenia
  Austria
  Azerbaijan
  Belarus
  Belgium
  Bosnia and Herzegovina
  Bulgaria
  Croatia
  Cyprus
  Czech Republic
  Denmark
  Estonia
  Finland
  France
  Georgia
  Germany
  Greece
  ...
  </code></pre>
  
  <p>I'm displaying them in a list:</p>
  
  <pre><code>&lt;ul class="mylist"&gt;
    &lt;li&gt;Albania&lt;/li&gt;
    &lt;li&gt;Andorra&lt;/li&gt;
    &lt;li&gt;Armenia&lt;/li&gt;
    &lt;li&gt;Austria&lt;/li&gt;
    &lt;li&gt;Azerbaijan&lt;/li&gt;
    ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>The list displays 4 columns on large displays:</p>
  
  <pre><code>ul.mylist li {
      float: left;
      width: 25%;
  }
  </code></pre>
  
  <p>and 2 on small displays:</p>
  
  <pre><code>ul.mylist li {
      float: left;
      width: 50%;
  }
  </code></pre>
  
  <p>This results in a list like (large display):</p>
  
  <pre class="lang-none prettyprint-override"><code>Albania     Andorra  Armenia  Austria
  Azerbaijan  Belarus  Belgium  Bosnia and Herzegovina
  Bulgaria    Croatia...
  </code></pre>
  
  <p>Okay, now to the tricky part: The count of countries which are displayed may vary due to filter-options. And I want to sort the countries the other way (top to bottom, left to right) like this:</p>
  
  <pre class="lang-none prettyprint-override"><code>Albania     Bosnia and Herzegovina Finland   [4th col]
  Andorra     Bulgaria               France    ...
  Armenia     Croatia                Georgia
  Austria     Cyprus                 Germany
  Azerbaijan  Czech Republic         ...
  Belarus     Denmark
  Belgium     Estonia
  </code></pre>
  
  <p>How can it be done keeping in mind that the CSS will fold the list to 2 columns on small displays?</p>