CSS砌体列/网格布局

Question

我有一些部分在移动设备上自然地一个接一个地流动。随着屏幕尺寸的增加，我希望能够创建一个更有趣的布局，其中一些内容并排在两列中。每列中各节的自然流不应绑定到另一列中的各节。第一列中第一部分的高度不限制/影响第二列中第一部分的高度。这是关键。

我想我可以这样说：在中等宽度的屏幕尺寸上，第1、4和5部分将进入第1列，第2、3和6部分将进入第2列。或任何订购最终以...

考虑下图，该图显示了如何在移动设备和台式机上订购这些部分。

我试图通过设置flex项目的宽度来形成列来使用flexbox容器来创建它。并使用flexbox命令重新定位各节。让项目包装以形成新行。问题是：对于行，任一列中项目的开始/结束之间都有关系。如下图所示，这会干扰布局（除非您的内容的形状/大小正确）。

使用CSS网格时，似乎会出现相同类型的问题。起初，我认为CSS网格是一个很有前途的角度，因为您可以分配多个要在同一单元格中显示的元素。但这似乎是为了在彼此上方显示内容，而不是让它们可以恢复在所述单元内的常规堆叠流程。 （尽管我还没有为这个示例创建原型。这是答案吗？）

由于它们的行/列行为，恐怕flexbox和CSS网格都无法解决问题。

一种备份是使用一些JavaScript，我可以在其中操纵DOM来将这些部分仅划分为单独的容器，并根据窗口调整大小事件对其进行排序。但是我真的很想只使用CSS来解决这个问题。