css - How do I make card-columns order horizontally?

Question

I have a smart-scrolling list of cards, and while I love the look of card-columns, its pretty frustrating that it orders top to bottom, like so: 1 4 7 2 5 8 3 6 9

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

I've tried some variations using flexbox, but couldn't get anything to work. Does anyone have horizontal ordering working?

Answer 1

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