Javascript 2柱腹板到1柱移动式，带动态高度框

在支持IE11和所有主要浏览器的情况下，如何创建此图表

Flexbox似乎不支持动态高度

lg视口是否必须有左/右列，xs视口是否必须没有列

框1`
框2`
框3`
方框4`
方框5`

---

正如我在评论中提到的，您可以使用媒体查询，根据当前屏幕大小呈现两种布局，并仅显示一种布局

黑客实施示例：

.集装箱{
宽度：100%；
}
.行{
显示器：flex；
弯曲方向：行；
调整内容：灵活启动；
宽度：100%；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
}
.项目{
宽度：100%；
边框：实心1px#dadada；
边界半径：16px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.仅限桌面{
显示：无；
}
.栏目{
宽度：100%；
}
}
@媒体屏幕和屏幕（最小宽度：601px）{
.仅限手机{
显示：无；
}
.栏目{
宽度：50%；
}
}
.项目-1{
高度：200px；
}
.项目-2{
高度：400px；
}
.项目-3{
高度：250px；
}
.项目-4{
高度：300px；
}
.项目-5{
高度：350px；
}
1.
3.
5.
2.
4.
1.
2.
3.
4.
5.

有很多方法可以做到这一点。如果要为自己创建网格系统，可以在需要时将和与多边形填充结合使用。或者，您可以使用任何广泛使用的网格系统框架，如或来命名一个fewn，不确定您所说的flexbox不支持“动态高度”。根据我的经验，您可以通过使用

柔性方向
柔性包裹
对齐内容
和
对齐项目
将几乎任何网格布局从flexbox中导出，所有行都从同一垂直位置开始。我需要每列中的项目从最后一个项目结束的地方开始。在代码笔中，您可以看到box2和Box4之间的空格。您刚刚注意到，在mobile view中，DIV顺序发生了变化。一个可能的解决方案是渲染这两个布局，并使用媒体查询选择性地隐藏其中一个。使用Flexbox和动态高度，您不能这样做，要么添加脚本，要么使用CSS网格或浮点。
<div class="container">
   <div id="box1" class="box">box1</div>`
   <div id="box2" class="box">box2</div>`
   <div id="box3" class="box">box3</div>`
   <div id="box4" class="box">box4</div>`
   <div id="box5" class="box">box5</div>`
</div>