Html 引导列垂直堆叠

在我正在创建的网站的“我的帖子”部分，我有4个栏目，每个栏目的帖子高度根据内容不同而不同。bootstrap4网格系统。根据下面的照片

当我调整第四列的大小时，请重新排列

如上图所示，第4列在数字1下移动，但其对齐基础在第3列的高度上。我想像下面的照片一样叠起来

2016年测试 2016年测试 2016年测试 2016年测试

---

这是一个棘手的问题，往往只是解决。网页更容易在网格中编码，所以事情往往是列和行。在您的示例中，包装行时需要足够高才能包含第三项。这意味着，如果第四项位于您想要的位置，它将位于第一项的单元格内

您可以使用类似的方法，我相信它可以在调整大小时计算顶部和左侧位置。或者我认为您可以使用flex和大量的包装器div，但这将变得混乱，并且是可怕的维护。它太乱了，我从来没有把它投入生产，要么是因为我在尝试时失去了理智，要么是因为我讨厌在一个小例子中工作时维护它的想法

Masonary允许一个相当简单的布局

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height3"></div>
  <div class="grid-item grid-item--height2"></div>
</div>

---

Bootstrap有一个内置的实用程序来解决这个问题，您可以使用卡片并将它们包装在卡片列中。请参阅文档

引导卡列从上到下，然后从左到右排列。因此，项目2将位于项目1之下，而不是OP想要的项目4。如果引导不起作用，Masorial看起来很有趣，我将切换到它