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

Question

Is it possible to order Bootstrap 4 Cards from left to right when wrapped in .card-columns?

Top to bottom (default):

1          


        

Answer 1

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?