html - 如何重新排序 CSS Flexbox

Question

我有一个带有 flex-direction: row 和 n 个元素的 flex 容器，它们没有固定的高度或宽度。在桌面上，我显示了 2 列，顺序完全相同。在手机上它是一列，但顺序不是我想要的。基本上我想在第一列的元素之后显示第二列的元素。如何重新排序它们以达到预期的结果？这是一个例子。

在桌面上两列

item1   item2
item3   item4
item5   item6

一列的期望结果

item1
item3
item5
item2
item4
item6

这是一个html和css

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

.item {
  flex: 1 0 50%;
}

@media only screen and (max-width: 520px) {
  .item {
    flex: 100%;
  }
}

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

Answer 1

您可以为此使用 flex 和 order:

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

.item {
  width: 50%;
  padding-bottom: 20px;
}

@media screen and (max-width: 800px) {
  .container {
    flex-direction: column;
  }
  .item {
    width: 100%;
  }
  .item3 {
    order: 2;
  }
  .item5 {
    order: 3;
  }
  .item2 {
    order: 4;
  }
  .item4 {
    order: 5;
  }
  .item6 {
    order: 6;
  }
}

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