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

Question

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 card-deck:

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>

Related:
How do I make card-columns order horizontally?

Leave a Comment Cancel reply