CODEWITHSUNDEEP
csstwitter-bootstrap-3html-listsmultiple-columnssorting
Paolo Sanchi
Paolo Sanchi

Reputation: 821

Variable multi column ordered list with bootstrap

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:

enter image description here

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

enter image description here

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 :)

Upvotes: 2

Views: 2406

Answers (1)

rnevius
rnevius

Reputation: 27102

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.

Upvotes: 3

Related Questions