Html 如何使用两个独立子div的元素更改显示顺序？

HTML结构如下所示：

<div class="main-parent">
    <div class="column-left">
        <div class="1">
          1
        </div>
        <div class="2">
          2
        </div>
    </div>
    <div class="column-right">
        <div class="3">
          3
        </div>
        <div class="4">
          4
        </div>
    </div>
</div>

.main-parent {
  display:flex;
  flex-direction:column;
}
.1 {
  order:4;
}
.2 {
  order:3;
}
.3 {
  order:2;
}
.4 {
  order:1;
}

我似乎无法更改顺序，因为具有displayflex的主父级有两个不同的子级div

---

如何在不删除左右列的情况下实现此功能？

我认为使用flex显示屏是个好主意。 当您使用媒体查询通过移动设备时，可以更改容器的弯曲方向

cf:

比如：

.c{
填充：10px；
利润率：10px；
边框：1px纯黑；
}
.主要父母{
显示器：flex；
弯曲方向：柱反向；
}
@仅介质屏幕和（最小宽度：768px）{
.主要父母{
弯曲方向：行；
}
}

1.
2.
3.
4.

我认为使用flex显示屏是个好主意。 当您使用媒体查询通过移动设备时，可以更改容器的弯曲方向

cf:

比如：

.c{
填充：10px；
利润率：10px；
边框：1px纯黑；
}
.主要父母{
显示器：flex；
弯曲方向：柱反向；
}
@仅介质屏幕和（最小宽度：768px）{
.主要父母{
弯曲方向：行；
}
}

1.
2.
3.
4.

Flexbox可以做到这一点，但通常不与不同父母的孩子一起使用

但是，如果可以将父对象的

display

属性重写为

display:contents

，则可以对子对象重新排序

内容

这些元素本身不会生成特定的长方体。它们被其伪框和子框替换

支持现在相当好（没有IE）-参见

本质上，

display:contents

使父母的“盒子”消失，然后孩子成为祖父母的弹性物品

*{
保证金：0；
填充：0；
框大小：边框框；
}
：：之前，
：：之后{
框大小：继承；
}
.孩子{
背景：浅蓝色；
边框：1px纯蓝色；
填充：1em；
}
格兰德先生{
显示器：flex；
柔性包装：包装；
}
.搬家{
顺序：2；
背景：浅绿色；
}
.家长{
显示：内容；
}
.孩子{
弹性：0.50%；
}

儿童1.1
儿童1.2
儿童2.1
儿童2.2

Flexbox可以做到这一点，但通常不与不同父母的孩子一起使用

但是，如果可以将父对象的

display

属性重写为

display:contents

，则可以对子对象重新排序

内容

这些元素本身不会生成特定的长方体。它们被其伪框和子框替换

支持现在相当好（没有IE）-参见

本质上，

display:contents

使父母的“盒子”消失，然后孩子成为祖父母的弹性物品

*{
保证金：0；
填充：0；
框大小：边框框；
}
：：之前，
：：之后{
框大小：继承；
}
.孩子{
背景：浅蓝色；
边框：1px纯蓝色；
填充：1em；
}
格兰德先生{
显示器：flex；
柔性包装：包装；
}
.搬家{
顺序：2；
背景：浅绿色；
}
.家长{
显示：内容；
}
.孩子{
弹性：0.50%；
}

儿童1.1
儿童1.2
儿童2.1
儿童2.2

您也可以通过在列右侧和列左侧设置显示弹性来实现这一点。请看一下更新的代码。这可能对你有帮助

.main父级{
显示器：flex；
弯曲方向：立柱；
}
.左栏{
顺序：2；
}
.右栏{
顺序：1；
}
.左栏，
.右栏{
显示器：flex；
弯曲方向：立柱；
}
.左栏.第一框{
顺序：2；
}
.左栏.第二框{
顺序：1；
}
.右栏.第三栏{
顺序：2；
}
.右栏.第四栏{
顺序：1；
}

1.
2.
3.
4.

您也可以通过在列右侧和列左侧设置显示弹性来实现这一点。请看一下更新的代码。这可能对你有帮助

.main父级{
显示器：flex；
弯曲方向：立柱；
}
.左栏{
顺序：2；
}
.右栏{
顺序：1；
}
.左栏，
.右栏{
显示器：flex；
弯曲方向：立柱；
}
.左栏.第一框{
顺序：2；
}
.左栏.第二框{
顺序：1；
}
.右栏.第三栏{
顺序：2；
}
.右栏.第四栏{
顺序：1；
}

1.
2.
3.
4.

没问题，祝你好运！；）没问题，祝其他人好运！；）你知道吗？这实际上是我问题的真正答案。这并不是说我试图对左列和右列重新排序，而是想改变这两列组合在一起的元素的顺序。谢谢你知道吗？这实际上是我问题的真正答案。这并不是说我试图对左列和右列重新排序，而是想改变这两列组合在一起的元素的顺序。谢谢