问：

我希望能够呈现不同高度的小部件（框，从这里开始），但对于特定的位置，它们会根据页面数据而有所不同（应该呈现哪些框，以及哪个顺序 + 高度可以不同）

我不想在盒子之间或盒子内有任何不必要的空间。这是最难的部分！因为如果将盒子放在行中，则一行是固定高度（通常是该行上最高项目的高度）。

以下是我想要实现的目标的两个示例：

和

example-1 和 example-2

请注意方框上的不同高度，以及第 1 列如何只有方框 1。

我知道唯一可以做到这一点的方法是有两列（左和右），然后 flexbox 在每列中呈现框。好。

但是，问题来了：

在较小的屏幕尺寸（移动设备）上，我只想要一列。我希望这些框在同一列中，这样我就可以安排它们的顺序。例如，像这样：

示例-3

注意 box-3 是如何被推到顶部的。

我已经尝试过的

我一直在尝试必须完全不同的渲染，具体取决于断点，但这会使框在更改窗口宽度时重新渲染，这并不理想，因为这会使它们闪烁甚至重新获取数据。

• pureCSS：css-grid，不适用于通常的行，因为这是一个固定的高度。可以使用两个严格的列，然后每个框内都有自己的行，以便在其中灵活呈现。但是，在转到移动视图（1 列）时，这需要重新渲染框，因为排序不起作用（框 1 与框 2-3-4 分开）

• pureCSS：flexbox，还需要两个单独的 flexbox 容器（每列一个），它们不会对项目进行排序

• 砌体：唯一的问题是不让我订购物品！！并且还用 box-2 填充第一列（参见示例）。否则效果很好。

• react-grid-layout：效果很好，但是，盒子的 dynamicHeight 有问题。假设数据很大，那么小部件/组件高度就会卡住。

如果这很重要，我正在使用 react。也许我可以有两种不同的渲染（桌面 2 列 / 移动 1 列），如果有一种方法可以渲染同一个盒子但在 dom 的不同位置（因此不会让它们重新渲染）？

非常感谢任何有助于更好地理解这个问题的帮助，谢谢。