在媒体查询上向嵌套的弹性容器添加一行

Question

我有一个主容器，使用 flex-direction 行容纳所有 div。

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

使用 flex-box 和媒体查询，我试图将现有的两行列 div 'smaller-container' 更改为三行列 div小于 1000px.

我尝试通过在 smaller-container 中创建第三个空 div 并将其顺序与较小容器 [=51= 外的 div 交换] 一旦浏览器宽度小于1000px.

没用。我认为这是因为有问题的两个 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