如何重新排序 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

您可以将 order 属性与 flexbox 一起使用。这是资源=> https://developer.mozilla.org/en-US/docs/Web/CSS/order

@media (max-width: 520px) {
  .item:nth-child(1) {
     order: 1;
  }
  
  .item:nth-child(2) {
     order: 4;
  }

  .item:nth-child(3) {
     order: 2;
  }

  .item:nth-child(4) {
     order: 5;
  }

  .item:nth-child(5) {
     order: 3;
  }

  .item:nth-child(6) {
     order: 6;
  }
}

Answer 2

您可以使用 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>

Answer 3

只需添加这个

  .item:nth-child(2n - 1) {
    order: -1;
  }

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

.item {
  flex: 1 0 50%;
}

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

  .item:nth-child(2n - 1) {
    order: -1;
  }
}

<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>

如何重新排序 CSS Flexbox

How to reorder CSS Flexbox

html

css

flexbox