Html 使用flexbox的基于两列卡的桌面和移动设备布局

我想制作一个两列html结构，如下图所示：

每个框中的数字表示html标记中

div

的顺序

挑战在于我希望在移动设备上有不同的排序顺序。例如，在移动设备上，数字4应该低于数字1，而不更改html。我认为使用flexbox应该是实现这一目标的最佳方法。但我不能让它工作

使用

float

不是正确的方法，因为在有一些空间的第一面，下一个

div

将自动浮动到该面

我也不能为每一列制作额外的包装器，因为使用

order

将不起作用

有人有主意吗

*{
框大小：边框框；
}
.行{
显示：内联块；
宽度：100%；
}
.项目{
边框：1px实心#000；
宽度：50%；
浮动：左；
}

1.
2.
3.
4.
5.
6.

以下代码具有以下功能：

• 列方向flex容器
• 柔性项目在视口高度包裹
• 在较小的屏幕上（基于高度或宽度），第四个项目在视觉顺序中移动到第二个位置，并且项目在单个全宽列中对齐

*{
框大小：边框框；
}
.行{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：100vh；
最大宽度：100vw；
}
.项目{
宽度：45%；
保证金：5px；
边框：1px实心#000；
}
@介质（最大宽度：500px）（最大高度：500px）{
.row{flex direction:row；}
.项目{弹性基础：100%；}
.项目：第n个子（1）{顺序：-2；}
.项目：第n个子（4）{顺序：-1；}
}

1.
2.
3.
4.
5.
6.

非常感谢！为什么较小屏幕上的项目显示为一行？在我的问题中我没有告诉你，但我想在桌面上有两列结构，在移动设备上有一列。其中数字4（例如）应显示为第二个。第一个媒体查询覆盖屏幕宽度。我添加了第二个媒体查询以涵盖屏幕高度。如果我是对的，只有当屏幕高度或行高度上不再有空间时，才会有第二列？我想在桌面设备上，数字4应该放在右栏的顶部，数字5应该放在4下面，等等。我修改了演示。希望它现在能起作用。否则让我知道。