List in columns layout depending on viewport width

Question

How can I make several columns from one list with CSS?
The number of columns must change depending on the screen width with media queries as shown here :

lage screen:

Row1 Row6  Row11
Row2 Row7  Row12
Row3 Row8  Row13
Row4 Row9  Row14
Row5 Row10

middle screen:

Row1 Row8
Row2 Row9
Row3 Row10
Row4 Row11
Row5 Row12
Row6 Row13
Row7 Row14

small screen:

Row1
Row2
Row3
Row4
Row5
Row6
Row7
Row8
Row9
Row10
Row11
Row12
Row13
Row14

Here is my HTML code :

<ul>
  <li>Row1</li>
  <li>Row2</li>
  <li>Row3</li>
  <li>Row4</li>
  <li>Row5</li>
  <li>Row6</li>
  <li>Row7</li>
  <li>Row8</li>
  <li>Row9</li>
  <li>Row10</li>
  <li>Row11</li>
  <li>Row12</li>
  <li>Row13</li>
  <li>Row14</li>
</ul>

Answer 1

You can do this with CSS multi-column layout. Just to add support isn't the best.

Or if you can set fixed height on ul you could use Flexbox and flex-direction: column; like this DEMO but its not really "flexible" solution.

ul {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
   column-count: 3;
   list-style-type: none;
}

@media(max-width: 992px) {
  ul {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
     column-count: 2;
  }
}

@media(max-width: 480px) {
  ul {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
     column-count: 1;
  }
}

<ul>
  <li>Row1</li>
  <li>Row2</li>
  <li>Row3</li>
  <li>Row4</li>
  <li>Row5</li>
  <li>Row6</li>
  <li>Row7</li>
  <li>Row8</li>
  <li>Row9</li>
  <li>Row10</li>
  <li>Row11</li>
  <li>Row12</li>
  <li>Row13</li>
  <li>Row14</li>
</ul>

Answer 2

You can use CSS columns combined with media queries to change the number of columns based on viewport width.

In the following example the columns change from 3 to 2 when the viewport is 700px wide and from 2 to 1 when the viewport is 500px wide.
Note that you don't need to specify anything for narrow viewport as the one column display is the default layout and only specify columns starting on what you called "middle screen":

@media (min-width: 500px){  
  ul{
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
  }
}
@media (min-width: 700px){  
  ul{
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
  }
}

<ul>
  <li>Row1</li>
  <li>Row2</li>
  <li>Row3</li>
  <li>Row4</li>
  <li>Row5</li>
  <li>Row6</li>
  <li>Row7</li>
  <li>Row8</li>
  <li>Row9</li>
  <li>Row10</li>
  <li>Row11</li>
  <li>Row12</li>
  <li>Row13</li>
  <li>Row14</li>
</ul>

Note that the the columns property needs vendor prefixed to maximize browser support, it is supported by IE10+ (more info on canIuse).

Answer 3

This a simple solution but more accepted on old browsers.

You can divide the LI's by adjusting their size and displaying them as inline-block.

In this case, 4 columns 25% width each Li, when the screen is larger than 768px and 2 columns when the screen is smaller than 768px. (you can add as many media queries as you want)

li {
    width: 25%;
    display: inline-block;
    margin: 0 -2px;
  }

@media (max-width: 768px){  
  li{
        width: 50%;
  }
}

<ul>
  <li>Row1</li>
  <li>Row2</li>
  <li>Row3</li>
  <li>Row4</li>
  <li>Row5</li>
  <li>Row6</li>
  <li>Row7</li>
  <li>Row8</li>
  <li>Row9</li>
  <li>Row10</li>
  <li>Row11</li>
  <li>Row12</li>
  <li>Row13</li>
  <li>Row14</li>
</ul>