How to make columns of columns arranged horizontally?

Question

I have a list of scrollable smart scrolls, and although I like the look of card-columns , it is rather disappointing that it orders from top to bottom, for example: 1 4 7 2 5 8 3 6 9

This vertical ordering seems useless for everything where content loads more than a few items. If I have 50 items, some of the least important will be at the top!

I tried some options with flexbox but couldn't make anything work. Does anyone have a horizontal workflow?

Answer 1

As documented , the order of the CSS columns is from top to bottom, and then from left to right so that the order of the displayed columns is ..

 1 3 5 2 4 6 

Cannot reorder CSS columns. He suggested using another solution, such as Freemasonry. https://github.com/twbs/bootstrap/issues/17882

Answer 2

Here a good and basic solution (not directly for bootstrap) was found to install stone vertical or horizontal using css http://w3bits.com/flexbox-masonry/ p>

I will give a test and give feedback on how to use with bootstrap 4.

for horizontal use :

 .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 use :

 .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 */ }