csstwitter-bootstrapbootstrap-4column-count

set class on specific screen size (bootstrap)

I am working with bootstrap.

And would like to load several classes depending on screen size, like sm-col, xs.col.

Example: Got a text id

<div id="text" class="xs-format lg-format ..."></div>

style = 
.sm-format{
 column-count: 3;
}

.xs-format{
 column-count: 1;
}

.lg-format{
 column-count: 5;
}

It should load text in 1 column if xs screen is loading, 3 columns on sm screens and 5 on lg screens.

Any hint?

Regards n00n

Solution

  • You could look into Bootstrap's card columns, but you're going to have to edit the media queries if you want more than 3 columns on larger screen sizes.