Html 具有两列的Flexbox行，为窄屏幕重新排序

我正在尝试使用flexbox创建一个响应性布局，其中一对项目（两个和四个）需要堆叠，在大屏幕上时靠近第三节，但在窄屏幕上，顺序需要更改，以便它们堆叠，一、二、三、四

我有一个解决方案，但它不是干的，正如您在我复制的第四部分的代码片段中所看到的

使用flexbox而无需复制是否可以实现这一点

.container{
显示器：flex；
柔性包装：包装；
宽度：100%；
边框：1px纯红；
}
.科{
边框：1px纯绿色；
柔性生长：1；
}
.1、.2、.4{
宽度：100%；
}
.分箱{
显示：内联flex；
弯曲方向：立柱；
宽度：50%；
}
.仅限手机{
显示：无；
}
@介质（最大宽度：600px）{
.集装箱{
弯曲方向：立柱；
}
.分箱{
宽度：100%；
}
.科{
宽度：100%；
}
.仅限桌面{
显示：无；
}
.仅限手机{
显示：块；
}
}

一个
两个
四
三
四

Flexbox不是为构建二维网格（列和行可以相交）而设计的。因此，为了让您的布局使用flex属性，您必须按照自己的方式进行修改

以下是对该问题的更完整解释：

但是，使用CSS网格，您的布局非常简单

.container{
显示：网格；
网格模板柱：1fr 1fr；
网格自动行：50px；
网格间距：5px；
网格模板区域：“一个”
“二三”
“四三”；
}
.1{网格区域：1；}
.two{网格区域：two；}
.three{网格区域：three；}
.four{网格区域：four；}
@介质（最大宽度：600px）{
.集装箱{
网格模板列：1fr；
网格模板区域：“一个”
“两个”
“三个”
“四”；
}
}
/*非必要的；只是为了演示*/
.科{
边框：1px纯色灰色；
背景颜色：浅绿色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

一个
两个
三
四

是的，如果你可以包装2/4和3，并在包装上设置一个固定的高度……如果不是，那么你需要一个脚本，或者它可能可以通过CSS GridWell实现。还有一种方法，三的高度可以由2/4之和控制，如果三个包装中的内容变大，它会得到一个卷轴吗？@LGSon：是的；CSS网格非常适合使用！：）作为一篇介绍，我建议阅读埃里克·迈耶的《一个独立的列表》文章：“@DavidThomas我知道一个人能做些什么（已经知道了一些），但远不是全部：）。。。谢谢你的链接