How do I make card-columns order horizontally?
As documented, 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
Found here a nice and basic solution (not directly for bootstrap) to set a masonry vertical or horizontal with css http://w3bits.com/flexbox-masonry/
I will give a test and give feedback how to use with bootstrap 4.
for horizontal usage:
.masonry {
display: flex;
flex-flow: row wrap;
margin-left: -8px; /* Adjustment for the gutter */
}
.masonry-brick {
flex: auto;
height: 250px;
min-width: 150px;
margin: 0 8px 8px 0; /* Some gutter */
}
.masonry-brick {
&:nth-child(4n+1){
width: 250px;
}
&:nth-child(4n+2){
width: 325px;
}
&:nth-child(4n+3){
width: 180px;
}
&:nth-child(4n+4){
width: 380px;
}
}
for vertical usage:
.masonry {
display: flex;
flex-flow: column wrap;
max-height: 800px;
margin-left: -8px; /* Adjustment for the gutter */
}
.masonry-brick {
margin: 0 8px 8px 0; /* Some gutter */
}
The only thing that worked for me was integrating "bricklayer"
- https://github.com/ademilter/bricklayer