List Items In Columns From Top To Bottom Instead Of Left To Right

I have a list of countries in alphabetical order like: Albania Andorra Armenia Austria Azerbaijan Belarus Belgium Bosnia and Herzegovina Bulgaria Croatia Cyprus Czech Republic Denm

Solution 1:

Use CSS3 multi-column layout for this. Browser support is questionable so please use vendor prefixes.

ul {
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  width: 100%;
}
/* default */
ul {
     -moz-column-count: 4;
  -webkit-column-count: 4;
          column-count: 4;
}
/* < 800px */
@media screen and (max-width: 799px) {
  ul {
       -moz-column-count: 3;
    -webkit-column-count: 3;
            column-count: 3;
  }
}
/* < 400px */
@media screen and (max-width: 399px) {
  ul {
       -moz-column-count: 2;
    -webkit-column-count: 2;
            column-count: 2;
  }
}

<ul>
  <li>Albania</li>
  <li>Andorra</li>
  <li>Armenia</li>
  <li>Austria</li>
  <li>Azerbaijan</li>
  <li>Belarus</li>
  <li>Belgium</li>
  <li>Bosnia and Herzegovina</li>
  <li>Bulgaria</li>
  <li>Croatia</li>
  <li>Cyprus</li>
  <li>Czech Republic</li>
  <li>Denmark</li>
  <li>Estonia</li>
  <li>Finland</li>
  <li>France</li>
  <li>Georgia</li>
  <li>Germany</li>
  <li>Greece</li>
</ul>

Solution 2:

Just to make it clear from Salman A answer (I only understood his answer once I read the third solution from this post ― the "Text Columns" one), the main part of the code to change the li order from left to right to top to bottom is:

ul {
  column-count: 4;
  column-gap: 0;
}
li {
  display: inline-block;
}

Everything else in Salman A answer is to make the adjustment for large/small screens