可以将2列嵌套div合并为单个列，然后使用CSS重新排序吗？

Question

所以，我很确定不可能做到以下几点，但我想我还是会问！

我的网站设计上有两列内容。两者都有一个包装div，浮动，所以它们并排坐着。这在桌面布局上看起来很好，在移动（响应）布局上，它们当前都填充到100％宽度，并且堆叠在彼此之上。

我真正想要做的是更改移动布局上每个浮动包装内的嵌套div的顺序，这样，基本上，两列合并为一列，嵌套div的排序更改如下： / p>

DESKTOP
1 5
2 6
3 7
4 8

MOBILE
1
5
2
3
6
7
8
4

希望这很清楚！我知道我可以使用flexbox来改变移动布局上的顺序，但据我所知，只能在每个单独的包装器div中更改顺序。还尝试在桌面布局上以各种方式浮动嵌套div，但无济于事。

编辑： 道歉，我应该粘贴我的代码：

<div id="container">
  <div class="wrapper-left">
    <div class="divInside div1">1</div>
    <div class="divInside div2">2</div>
    <div class="divInside div3">3</div>
    <div class="divInside div4">4</div>
  </div>
  <div class="wrapper-right">
    <div class="divInside div5">5</div>
    <div class="divInside div6">6</div>
    <div class="divInside div7">7</div>
    <div class="divInside div8">8</div>
  </div>
</div>

或

<div id="container">
  <div class="wrapper">
    <div class="divInside div1">1</div>
    <div class="divInside div2">2</div>
    <div class="divInside div3">3</div>
    <div class="divInside div4">4</div>
    <div class="divInside div5">5</div>
    <div class="divInside div6">6</div>
    <div class="divInside div7">7</div>
    <div class="divInside div8">8</div>
  </div>
</div>

此处还有一张图片来说明我的目标。真诚的道歉，这是我的第一个问题！

Answer 1

在对评论进行反馈后，我会使用flexbox和order属性更改我的答案，因为您指出了之前尝试过的问题。相反，你不需要两个包装来获取它。

＆＃13;

＆＃13;

html,body{
  width: 100%;
  height: 100%;
  margin: 0;
}

#container{
  width: 100%;
  height: 100%;
}

.wrapper{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.red{
  background-color: red;
}

.yellow{
  background-color: yellow;
}

.divInside{
  border: 1px solid;
  height: 25%;
  width: 50%;
  flex-basis: 49%;
}

.div1{
  order: 1;
}

.div2{
  order: 3;
}

.div3{
  order: 5;
}

.div4{
  order: 7;
}

.div5{
  order: 2;
}

.div6{
  order: 4;
}

.div7{
  order: 6;
}

.div8{
  order: 8;
}

@media screen and (max-width: 400px){
  .wrapper{
    width: 100%;
  }
  
  .divInside{
    flex-basis: 100%;
  }
  
  .div3{
    order: 4;
  }
  
  .div4{
    order: 8;
  }
  
  .div8{
    order: 7;
  }
}

＆＃13;

<div id="container">
  <div class="wrapper">
    <div class="divInside div1">1</div>
    <div class="divInside div2">2</div>
    <div class="divInside div3">3</div>
    <div class="divInside div4">4</div>
    <div class="divInside div5">5</div>
    <div class="divInside div6">6</div>
    <div class="divInside div7">7</div>
    <div class="divInside div8">8</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果将HTML设置为css表结构（display:table-row;和display:table-cell;）设置桌面格式的所需值，那么解决此问题会很简单。

然后，使用媒体查询，您只需在桌面大小上设置这些显示属性，当它转到移动大小时，它将叠加在另一个上面：

.main > div > div {
  border: 1px solid silver;
}

@media (min-width: 400px) {
  .main {
    display: table;
    width: 100%;
  }
  .main > div {
    display: table-row;
  }
  
  .main > div > div {
    display: table-cell;
  }
}

<div class='main'>
  <div>
    <div>1</div>
    <div>5</div>
  </div>
  <div>
    <div>2</div>
    <div>6</div>
  </div>
  <div>
    <div>3</div>
    <div>7</div>
  </div>
  <div>
    <div>4</div>
    <div>8</div>
  </div>
</div>

Answer 3

注意：Firefox ONLY解决方案

display有一个实验性的CSS contents属性，它允许我们拥有所需的结构，但可以根据需要解包各自的包装。

我在此处记录此信息以供其他浏览器采用。

MDN Reference

  

这些元素本身不会产生特定的盒子。它们被伪盒子和子盒子取代。

Codepen Demo

＆＃13;

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
#container {
  width: 100%;
  height: 100%;
  display: flex;
}
.wrapper {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.red > .divInside {
  background-color: red;
}
.yellow > .divInside {
  background-color: yellow;
}
.divInside {
  border: 1px solid;
  height: 25%;
  width: 100%;
  order: 0;
}
.red .divInside:nth-child(1) {} .red .divInside:nth-child(2) {
  order: 3;
}
.red .divInside:nth-child(3) {
  order: 5
}
.red .divInside:nth-child(4) {
  order: 8
}
.yellow .divInside:nth-child(1) {
  order: 2;
}
.yellow .divInside:nth-child(2) {
  order: 5
}
.yellow .divInside:nth-child(3) {
  order: 6
}
.yellow .divInside:nth-child(4) {
  order: 7
}
@media screen and (max-width: 760px) {
  .wrapper {
    display: contents;
  }
  #container {
    flex-direction: column;
  }
}

＆＃13;

<div id="container">
  <div class="wrapper red">
    <div class="divInside">1</div>
    <div class="divInside">2</div>
    <div class="divInside">3</div>
    <div class="divInside">4</div>
  </div>
  <div class="wrapper yellow">
    <div class="divInside">5</div>
    <div class="divInside">6</div>
    <div class="divInside">7</div>
    <div class="divInside">8</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;