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