Variable multi column ordered list with bootstrap

Question

I'd like to create a list on more columns. The number of the columns should change by the size of the window. I can archive this just setting the col-- classes, like this:

<ol>
    <li class="col-md-3 col-sm-4" data-ng-repeat="searchBoxItem in destinations">
        {{searchBoxItem.name}}
    <li>
</ol>

(angularjs is used just to repeat the elemnts, and to explain that they may change in quantity)

The result is quite fine:

when I'm on a pad, it is like this:

The point is that the sorting of the elements increases horizontally. I'd like instead to have them vertically sorted.

I can't imagine a way to do it in CSS3, or even with a clean solution, without involving js.

Possibly, I'd like to have ie8 compatibility :)

Answer 1

You're going to want to use the CSS3 Multi-Column Layout, via a combination of column-count and column-width. To make this work (and since columns are variable, depending on the device width), you're going to want to add additional classes to your list, to define column states for desktop and mobile.

This will ensure that things are sorted vertically, in a similar way that page columns are defined for print layouts (for example, newspapers).

This guide on CSS Tricks has a great overview of responsive CSS columns.

For example, in your case, you could use something like:

ol li {
  -webkit-columns: 4 100px;
     -moz-columns: 4 100px;
          columns: 4 100px;
}

This basically says, "I want a maximum of 4 columns, with minimum widths of 100px. If the widths get too narrow during scaling...reduce the column count." But I'd recommend adding a class or ID to this area, so that you can target it specifically.