在媒体查询中将一行添加到嵌套的flex容器中

Question

我有一个主容器，它使用行的div来保存所有的flex-direction。

嵌套的第二个容器包含两个具有div of列的flex-direction s，以便在外部容器中的一行中堆叠两个divs。

使用flex-box和媒体查询，当浏览器宽度小于1000 is时，我试图将现有的两行列div“小容器”更改为三行列div。

我尝试这样做:在smaller-container中创建第三个空smaller-container，并在浏览器宽度小于1000 is时与较小容器外部的div交换其顺序。

它没有起作用。我认为这是因为所讨论的两个div(空div和外部div)处于不同的嵌套级别。

如果有人能找到一个解决方案，把一列中的两行转到一列中的三行，那就太好了。

更好的是，如果该解决方案不需要嵌套容器。如果不需要插件，Javascript解决方案也是受欢迎的。

它应该是什么样的形象：

​

​

​

/*Basic Reset*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  max-width: 1366px;
  margin: auto;
  width: 100%;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.box-1 {
  order: 1;
  background-color: red;
  height: 150px;
  width: 50%;
}
.smaller-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 50%;
  order: 2;
}
.box-2 {
  order: 3;
  background-color: blue;
  height: 75px;
  width: 100%;
}
.box-3 {
  order: 4;
  background-color: green;
  height: 75px;
  width: 100%;
}
.box-4 {
  order: 5;
  width: 100%;
}
.box-5 {
  order: 6;
  background-color: orange;
  height: 150px;
  width: 100%;
}
@media screen and (max-width: 1000px) {
  .box-2 {
    height: 50px;
  }
  .box-3 {
    height: 50px;
  }
  /******* Here we swap the empty div that hasbeen existing in the smaller container
        with an outer div ********/
  .box-5 {
    order: 5;
    height: 50px;
  }
  .box-4 {
    order: 6;
    background-color: purple;
    height: 150px;
  }
}
[image of desired solution][1] [1]:http://i.stack.imgur.com/vlvlx.png

<div class="container">
  <div class="box-1"></div>
  <div class="smaller-container">
    <div class="box-2"></div>
    <div class="box-3"></div>
    <div class="box-4"></div>
  </div>
  <div class="box-5"></div>
</div>

​

https://jsfiddle.net/lukindo/nuv603h9/1/

Answer 1

嗯，您是对的，order属性不能在不同的嵌套级别上工作。It only works among siblings。

脚本是您可以追求的一种选择。另一个有点麻烦的地方是复制HTML元素。具体来说，将橙色框元素(.box-5)放置在主容器和嵌套容器中。

然后在每个媒体查询的橙色和紫色框上使用display: none。

下面是一个例子：

​

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  max-width: 1366px;
  margin: auto;
  width: 100%;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.box-1 {
  order: 1;
  background-color: red;
  height: 150px;
  width: 50%;
}
.smaller-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 50%;
  order: 2;
}
.box-2 {
  order: 3;
  background-color: blue;
  height: 75px;
  width: 100%;
}
.box-3 {
  order: 4;
  background-color: green;
  height: 75px;
  width: 100%;
}
.smaller-container > .box5 {
  display: none;
}
.container > .box-5 {
  order: 6;
  background-color: orange;
  height: 150px;
  width: 100%;
}
@media screen and (max-width: 1000px) {
  .box-2 {
    height: 50px;
  }
  .box-3 {
    height: 50px;
  }
  .container > .box-4 {
    order: 6;
    background-color: purple;
    height: 150px;
    width: 100%;
  }
  .smaller-container > .box-5 {
    display: block;
    height: 50px;
    background-color: orange;
    width: 100%;
    order: 6;
  }
  .container > .box-5 {
    display: none;
  }
}

<div class="container">
  <div class="box-1"></div>
  <div class="smaller-container">
    <div class="box-2"></div>
    <div class="box-3"></div>
    <div class="box-5"></div>
  </div>
  <div class="box-4"></div>
  <div class="box-5"></div>
</div>

​

Revised Fiddle