Menu
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.
731
Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12 , responsively such as order-md-12 order-2 (last on md , 2nd on xs ) relative to the parent . row . It's also possible to change column order using the flexbox direction utils...
An end-user can sort the Card View by clicking the header of a column by which data should be sorted. An arrow glyph indicates the sort order within the sorted column. The Card View can be sorted against multiple columns by clicking the required column headers while holding down the shift key.
Make the card and the inner container flex-columns, then tell the container to xpand as much as possible with flex:1 . Then push the h4 to the bottom of the container with margin-top:auto . Show activity on this post. I think display: flex will do the trick for you.
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?
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
