The sequence of the CSS columns goes from top to bottom, then left to right resulting in the following arrangement of columns:
1 3 5
2 4 6
Modifying the order of CSS columns is not supported. It is recommended to explore alternative solutions like Masonry. https://github.com/twbs/bootstrap/issues/17882
Even with flexbox enabled, it will not affect the Bootstrap card-deck
layout as it utilizes CSS columns instead. However, you can combine card-deck
with flexbox to achieve equal height cards:
An alternative approach is to utilize the grid in conjunction with flexbox rather than relying on card-deck
:
You can utilize the new d-flex
class to reduce unnecessary 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>
For more information, refer to:
How do I make card-columns order horizontally?