Marvin Marvin - 9 days ago 10
CSS Question

Bootstrap 4 order Masonry-like column cards horizontal instead of vertical

Is it possible to order Bootstrap 4 Cards from left to right when wrapped in

.card-columns
?

Top to bottom (default):

1 3 5
2 4 6


Left to right:

1 2 3
4 5 6


Because of the varying height it is necessary for me to use an Masonry-like grid.

Answer

The order of the CSS columns is top to bottom, then left to right so the order of the rendered columns will be..

1  3  5
2  4  6

There is no way to change the order of CSS columns. It's suggested you use another solution like Masonry. https://github.com/twbs/bootstrap/issues/17882

Also, enabling SASS flexbox won't help because Bootstrap uses CSS columns (not flexbox) for the masonry effect. You can however use the card-deck and flexbox for equal height cards: http://www.codeply.com/go/YFFFWHVoRB

Comments