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