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.
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 flexbox won’t help because Bootstrap
card-deck 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
Another option is to use the grid along with flexbox instead of the
You can use the new
d-flex class to eliminate the extra CSS:
<div class="col-sm-4 d-flex pb-3"> <div class="card card-block"> Card. I'm just a simple card-block. </div> </div>
- Database Administration Tutorials
- Programming Tutorials & IT News
- Linux & DevOps World
- Ebook Reviews
- PES Matches, Skills & News