Marvin Marvin - 1 year ago 351
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


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 Source

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.

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download