调整屏幕大小时如何重新排列弹性内容？

Question

通过使用媒体查询和flexbox，我只能在第二行中重新排列内容的顺序。我想将顺序从第一行切换到第二行，但是找不到解决方法。

我试图更改其他订单号，但根本没有效果。

.item {
  width: 99%;
  height: 200px;
  background-color: blueviolet;
  display: flex;
}

.item1 {
  background-color: blue;
  width: 33%;
  height: 200px;
}

.item2 {
  background-color: cyan;
  width: 33%;
  height: 200px;
}

.item3 {
  background-color: red;
  width: 33%;
  height: 200px;
}

@media screen and (max-width: 500px) {
  div#item {
    order: 0
  }
  div#item1 {
    order: 3
  }
  div#item2 {
    order: 4
  }
  div#item3 {
    order: 1
  }
}

<div class="item" id="item"></div>
<div style="display: flex">
  <div class="item1" id="item1"></div>
  <div class="item2" id="item2"></div>
  <div class="item3" id="item3"></div>
</div>

调整屏幕大小时，我想更改两行之间的顺序。例如，在调整屏幕大小时，紫色和蓝色会相互更改位置。怎么做？

Answer 1

第一行和第二行是不同的Flexbox -您可以将item包装到第二行的容器中，并使用{em>包装的Flexbox 1}}。在第一行填满之后，如果该行中没有剩余空间，则 flex项目会移至下一行。

尝试为下面的第一行更改flex-wrap: wrap：

order

.wrapper {
  display: flex; /* flexbox container */
  flex-wrap: wrap; /* wrap the flexbox */
}

.item {
  width: 99%;
  height: 200px;
  background-color: blueviolet;
  display: flex;
}

.item1 {
  background-color: blue;
  width: 33%;
  height: 200px;
}

.item2 {
  background-color: cyan;
  width: 33%;
  height: 200px;
}

.item3 {
  background-color: red;
  width: 33%;
  height: 200px;
}

@media screen and (max-width: 500px) {
  div#item {
    order: 5; /* see changed order below 500px */
  }
  div#item1 {
    order: 3;
  }
  div#item2 {
    order: 4;
  }
  div#item3 {
    order: 1;
  }
}

Answer 2

只需为所有元素考虑一个flexbox容器，如下所示：

.container {
  display: flex;
  flex-wrap: wrap;
}

.container  > * {
  height: 100px;

}

.item {
  width: 100%;
  background-color: blueviolet;
}

.item1 {
  background-color: blue;
  width: calc(100%/3);
}

.item2 {
  background-color: cyan;
  width: calc(100%/3);
}

.item3 {
  background-color: red;
  width: calc(100%/3);
}

@media screen and (max-width: 500px) {
  .container > div {
    width:100%;
  }
  
  div.item {
    order: 2
  }
  div.item1 {
    order: 3
  }
  div.item2 {
    order: 4
  }
  div.item3 {
    order: 1
  }
}

<div class="container">
  <div class="item"></div>
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>