如何使卡片列水平排序？

我有一个智能滚动的卡片列表，虽然我喜欢它的外观card-columns，它从上到下排序，这非常令人沮丧，如下所示： 1 4 7 2 5 8 3 6 9

对于内容加载多个项目的任何内容，这种垂直排序似乎基本上毫无用处。如果我有 50 个项目，一些最不重要的项目将位于顶部！

我尝试过使用 Flexbox 进行一些变体，但没有任何效果。有人有水平排序工作吗？

在这里找到了一个很好的基本解决方案（不是直接用于引导程序）来使用 css 设置砌体垂直或水平http://w3bits.com/flexbox-masonry/ http://w3bits.com/flexbox-masonry/

我将进行测试并提供如何使用 bootstrap 4 的反馈。

用于水平使用:

.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;
  }
}

垂直使用:

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