Html CSS FlexBox |重新排列移动设备中的元素

我试图学习CSS Flexbox，但发现了一个障碍

我有在桌面屏幕大小上显示左右的内容，对于移动设备，我有

flex-direction:column

请参见下面的可视信息：

桌面：

流动电话：

这是实现以下目标的代码：

 <div class="container">
    <div class="box box1">
      <div class="a">a</div>
      <div class="b">b</div>
    </div>
    <div class="box box2">
       <div class="c">c</div>
      <div class="d">d</div>
    </div>
  </div>

问题：使用手机时：

• 如何将下列div按原样排序显示在列中但是顺序如下：

a

c

d

b

不幸的是，我似乎找不到解决办法

我有一个代码笔，重要的css行是从162行开始的

---

预先感谢。

你可以考虑<代码>显示：内容< <代码> >（在<代码> .box >代码>元素，然后你可以使用内部元素的顺序：

.box{
颜色：白色；
字号：80px；
文本对齐：居中；
文本阴影：4px4p0RGBA（0,0,0,0.1）；
填充：10px；
宽度：100vw；
}
身体{
保证金：0；
}
.集装箱{
显示器：flex；
高度：100vh；
背景：蓝色；
}
.a、.b、.c、.d{
身高：50%；
边框：2倍实心；
}
@全部和全部介质（最大宽度：500px）{
.集装箱{
弯曲方向：立柱；
}
.盒子{
显示：内容；
}
.b{
顺序：2；
}
}

A.
B
C
D
<代码> > p>可以考虑<代码>显示：内容< <代码> >（在<代码> .box >代码>元素中，您将能够使用内部元素的顺序：


.box{
颜色：白色；
字号：80px；
文本对齐：居中；
文本阴影：4px4p0RGBA（0,0,0,0.1）；
填充：10px；
宽度：100vw；
}
身体{
保证金：0；
}
.集装箱{
显示器：flex；
高度：100vh；
背景：蓝色；
}
.a、.b、.c、.d{
身高：50%；
边框：2倍实心；
}
@全部和全部介质（最大宽度：500px）{
.集装箱{
弯曲方向：立柱；
}
.盒子{
显示：内容；
}
.b{
顺序：2；
}
}

A.
B
C
D
Nuri Katsuki的评论是正确的。如果“abcd”div处于同一级别，则可以使用CSS
order
属性在移动设备上实现所需的顺序

另外，
flex wrap:wrap
在桌面查询中将子项流到列中

我已经编辑了您的示例来说明：


.container{
颜色：白色；
字体大小：100px；
文本对齐：居中；
文本阴影：4px4p0RGBA（0,0,0,0.1）；
宽度：100vw；
显示器：flex；
高度：100vh；
弯曲方向：立柱；
柔性包装：包装；
}
.a{背景：#e67e22；}
.b{背景：#e74c3c；}
.c{背景：#9b59b6；}
.d{背景：#34495e；}
.a、.b、.c、.d{
身高：50%；
宽度：50%；
}
@全部和全部介质（最大宽度：500px）{
.集装箱{
高度：自动；
}
.a、.b、.c、.d{宽度：100%；}
.b{
顺序：3；
}
}

A.
B
C
D
Nuri Katsuki的评论是正确的。如果“abcd”div处于同一级别，则可以使用CSS
order
属性在移动设备上实现所需的顺序

另外，
flex wrap:wrap
在桌面查询中将子项流到列中

我已经编辑了您的示例来说明：


.container{
颜色：白色；
字体大小：100px；
文本对齐：居中；
文本阴影：4px4p0RGBA（0,0,0,0.1）；
宽度：100vw；
显示器：flex；
高度：100vh；
弯曲方向：立柱；
柔性包装：包装；
}
.a{背景：#e67e22；}
.b{背景：#e74c3c；}
.c{背景：#9b59b6；}
.d{背景：#34495e；}
.a、.b、.c、.d{
身高：50%；
宽度：50%；
}
@全部和全部介质（最大宽度：500px）{
.集装箱{
高度：自动；
}
.a、.b、.c、.d{宽度：100%；}
.b{
顺序：3；
}
}

A.
B
C
D
如果您在
.box1
和
.c
和.box2中以
.c
和
.d
的形式订购div，您可以在
.container
中的列用于桌面，在
.box2
中以移动+顺序使用
.box2
中的列：


.box{
颜色：白色；
字体大小：100px；
文本对齐：居中；
文本阴影：4px4p0RGBA（0,0,0,0.1）；
填充：10px；
宽度：100vw；
显示：flex；/*如果您在
.box1
和
框2中以
.a
和
.c
和
.d
的形式订购div，您可以在
.container
中的列用于桌面，在
.box2
中以移动+顺序订购
.box2
中的列用于桌面：


.box{
颜色：白色；
字体大小：100px；
文本对齐：居中；
文本阴影：4px4p0RGBA（0,0,0,0.1）；
填充：10px；
宽度：100vw；
display:flex；/*仅使用CSS，我认为您的内容应该与您的用例具有相同的级别，您可以使用
order
，现在它们被困在父
div.box
中。谢谢您Nuri。您能提供一个答案示例吗？我的错，看看Temani Afif的答案。@NuriKatsuki我认为您仍然有e这是一个正确的观点，因为任何IE/Edge版本都不支持，而且其他主要浏览器也存在不可访问的问题，但是
display:contents
非常酷。@如果您需要对Edge的支持，您可以查看以下答案：仅使用CSS，我认为您的内容应该与您能够使用的内容处于相同的级别
order
与您的用例一起，现在它们被困在父
div.box
中。谢谢Nuri。您能提供一个答案示例吗？我的错，看看Temani Afif的答案。@NuriKatsuki我认为您仍然有一个正确的观点，因为在任何IE/Edge版本中都缺乏支持，并且其他主要应用程序无法访问或浏览器，但
display:contents
非常酷。@如果您需要对Edge的支持，可以查看以下答案：这是一个很酷的属性！希望在将来的浏览器版本中实现更好的支持。@NullisTrue添加了另一个方法，如果您可以更改
.box {
  color: white;
  font-size: 100px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 100vw;
}

.container {
  display: flex;
  height: 100vh;
}

.a, .b, .c, .d {
  height: 50%;
}

@media all and (max-width: 500px) {
  .container {
    flex-direction: column;
  }
  
  .box {
     height: 50vh;
  }
}