如何使用css更改移动设备中堆叠列的顺序

我有一个css问题，是关于在手机上订购栏目的。目前，我的网站有4列，在移动视图中，它们相互叠加。这些列具有一类文本列或一类图像列

下面是一张它在桌面和移动设备中的当前外观图片，正如您所看到的，我只想在移动设备中更改顺序

---

我的问题是如何使用css改变顺序以实现我想要的移动结果？我假设我需要向列中添加额外的类，然后使用这些类来帮助排序。我知道我需要将@media添加到css中，以确保它只在移动设备和平板电脑中出现。

您可以简单地在一个新的

div

中包含前两个div，比如假设

，同样，对于初学者，我会在这里使用flexbox，然后很容易更改移动设备的布局

请阅读以下文章：

---

Flexbox很棒，我建议您学习它。

您可以针对单个项目，使用

order

属性更改它们在视觉顺序中出现的位置

参考：

演示：

.col{
显示器：flex；
柔性包装：包装；
}
上校分区{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100px；
宽度：200px；
边框：2倍纯绿；
字号：18px；
}
/*超小型设备（手机，600px及以下）*/
@仅介质屏幕和（最大宽度：600px）{
.col分区：第n个孩子（1）{
顺序：1；
}
.col分区：第n个孩子（2）{
顺序：2；
}
.col分区：第n个孩子（3）{
顺序：4；
}
.col分区：第n个孩子（4）{
顺序：3；
}
}

.文本栏
.图像栏
.图像栏
.文本栏

你能在codepen上分享你的代码吗？太好了，非常感谢：）