Css 使用flex对元素进行垂直和水平重新排序

我使用display:flex和order值对不同断点的元素重新排序。到目前为止，它工作得很好，但我只使用了全宽度元素，所以到目前为止，它非常简单。现在我想做同样的事情，但是把两个元素放在一起。e、 g

<div class="wrapper">    
    <div class="object1">...</div>
    <div class="object2">...</div>
    <div class="object3">...</div>
    <div class="object4">...</div>
    <div class="object5">...</div>
</div>

到目前为止，我的CSS看起来像这样：

.wrapper {
    display: flex;
    flex-direction: column;
}
.object1 {
    order: 3;
    width: 50%;
}
.object2 {
    order: 1;
}
.object3 {
    order: 2;
}
.object4 {
    order: 5;
}
.object5 {
    order: 4;
    width: 50%;
}

这给我的是这样的：

[ object2               ]
[ object3               ]
[ object 1 ] [ object 5 ]
[ object 4              ]

[ object2               ]
[ object3               ]
[ object 1 ]
[ object 5 ]
[ object 4              ]

---

如果您有任何建议，我们将不胜感激。

我不确定

弹性方向：列
是否适合这里（不知道全部情况）

首先，您必须启用包装以获得两列（并限制我怀疑的高度），但我认为您会发现1和5的对齐方式存在问题

见：


*{
框大小：边框框；
}
.包装纸{
显示器：flex；
宽度：80%；
保证金：1em自动；
弯曲方向：立柱；
柔性包装：包装；
高度：100px；
长方体阴影：0 1px 0黑色；
}
[class^=“object”]{
文本对齐：居中；
边框：1px纯红；
宽度：50%；
高度：25px；
}
.1反对意见1{
顺序：3；
}
.反对意见2{
顺序：1；
}
.3反对意见3{
顺序：2；
}
.4反对意见4{
顺序：5；
}
.5反对意见{
顺序：6；
边缘顶部：50px；
}

反对意见1
反对意见2
反对意见3
反对意见4
object5-但是对齐是手动的吗？
我不确定
弹性方向：列
在这里是否合适（不知道全部情况）

首先，您必须启用包装以获得两列（并限制我怀疑的高度），但我认为您会发现1和5的对齐方式存在问题

见：


*{
框大小：边框框；
}
.包装纸{
显示器：flex；
宽度：80%；
保证金：1em自动；
弯曲方向：立柱；
柔性包装：包装；
高度：100px；
长方体阴影：0 1px 0黑色；
}
[class^=“object”]{
文本对齐：居中；
边框：1px纯红；
宽度：50%；
高度：25px；
}
.1反对意见1{
顺序：3；
}
.反对意见2{
顺序：1；
}
.3反对意见3{
顺序：2；
}
.4反对意见4{
顺序：5；
}
.5反对意见{
顺序：6；
边缘顶部：50px；
}

反对意见1
反对意见2
反对意见3
反对意见4
object5-但是对齐是手动的吗？
这真的很有帮助。我几乎到了我想去的地方。Flex功能强大，但很难让你动脑。这真的很有帮助。我几乎到了我想去的地方。Flex功能强大，但很难让你动脑。