Html 响应CSS：到达媒体查询断点后，将中间div行移到单独的列

我正在使用CSS媒体查询来创建响应性布局

在我当前的HTML布局中，我使用flexbox对齐div行：

第一组
第2组
第3组
第4组

和CSS：

#第页{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
[id^=“div-”]{
边框：1px实心#ccc；
边缘底部：10px；
宽度：50vw；
}
#第一组{
高度：50px；
}
#第2组{
高度：70像素；
}
#第3组{
高度：150像素；
}
#第4组{
高度：100px；
}

这是给你修补的

对于较小的视口，这正是我想要的，但我希望在下一个媒体查询断点上切换，以便有两个中间div切换到右侧的单独列，如下所示：

我如何做到这一点？我很清楚如何将最后几行div移到另一列，但不确定如何处理中间的行

---

有没有办法通过使用flexbox或grid来实现这一点？

另一种可能的解决方案是将order属性与flexbox结合使用（缺点：您需要一点额外的html并设置页面容器的高度；优点：灵活的div高度和间隙大小）：

#第页{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
[id^=“div-”]{
边框：1px实心#ccc；
边缘底部：10px；
宽度：50vw；
}
#第一组{
高度：50px；
背景：浅绿色；
}
#第2组{
高度：70像素；
背景：浅黄色；
}
#第3组{
高度：150像素；
背景：轻珊瑚；
}
#第4组{
高度：100px；
背景：浅蓝色；
}
@介质（最大宽度：1000px）{
#页面{
柔性包装：包装；
高度：300px；
}
#小筛网垫片{
顺序：3；
自我调整：伸展；
弹性：10100%；
右边距：10px；
}
#第一组{
顺序：1；
}
#第2组{
顺序：4；
}
#第3组{
顺序：5；
}
#第4组{
顺序：2；
}
}

第一组
第2组
第3组
第4组

这看起来像是我想要的，额外的html不是问题。有没有办法为

#页面

设置一个非固定高度，或者可以设置排序的最小高度和最大高度？我想我也可以用

vh

等单位来代替

px

。@Acidon我很高兴听到这个消息。使用两列布局的确切条件是什么？

#page{height:100vh；}

（或您想要的任何vh）在媒体查询中也应该起作用。