使用 Flexbox 对两个不同行中的列进行排序

Question

我需要使用 Flexbox CSS 订购放置在两行不同行中的 cols，但我只能为一行订购。我需要在两行之间有一个混合顺序。

现在我必须订购并显示 row1 中的 cols 以及 order 并显示 row2 中的 cols，但我想将它们混合并订购它们。 （桌面视图中的顺序没问题，但移动视图需要这个。这就是为什么我需要从两行完全重新排序）。

HTML：

<div class="container">
    <div class="row mobile-order">
        <div class="col-md-4 box6">1</div>
        <div class="col-md-4 box5">2</div>
        <div class="col-md-4 box4">3</div>
    </div>
    <div class="row mobile-order">
        <div class="col-md-4 box1">4</div>
        <div class="col-md-4 box2">5</div>
        <div class="col-md-4 box3">6</div>
    </div>
</div>

CSS：

/* CSS used here will be applied after bootstrap.css */
.mobile-order {
    display: flex;
    flex-direction: column;  
}
.test1 {
    order: 1;
}
.test2 {
    order: 2;
    background: #ccc;
}
.box1 {
    order: 1;
}
.box2 {
    order: 3;
}
.box3 {
    order: 5;
}
.box4 {
    order: 6;
}
.box5 {
    order: 4;
}
.box6 {
    order: 2;
}

Bootply test page

这就是我在桌面和移动设备上需要它的方式：

桌面：

Row1<br><div class="col-md-4 box6">1</div>  |   <div class="col-md-4 box5">2</div>   |   <div class="col-md-4 box4">3</div><br><br>

Row2<br>
<div class="col-md-4 box1">4</div>    |   <div class="col-md-4 box2">5</div>   |   <div class="col-md-4 box3">6</div>

手机：

<div class="col-md-4 box1">4</div><br>
<div class="col-md-4 box6">1</div><br>
<div class="col-md-4 box2">5</div><br>
<div class="col-md-4 box5">2</div><br>
<div class="col-md-4 box3">6</div><br>
<div class="col-md-4 box4">3</div>

Answer 1

CSS 显示模块 Level 3 引入display: contents：

元素本身不会生成任何框，但它的子元素和 伪元素仍然照常生成盒子。出于以下目的 框生成和布局，必须将元素视为具有 在文档中被其子元素和伪元素替换 树。

您可以使用它来“忽略”行并显示内部弹性项目，就好像它们属于同一个弹性容器一样。然后你就可以随意混合它们了。

.mobile-order {
  display: flex;
  flex-direction: column;
}
.row {
  display: contents;
}
.test2 > div {
  background: #ccc;
}
.box1 { order: 1; }
.box2 { order: 2; }
.box3 { order: 3; }
.box4 { order: 4; }
.box5 { order: 5; }
.box6 { order: 6; }

<div class="container mobile-order">
  <div class="row test2 mobile-order">
    <div class="col-md-4 box1">1 (row 1)</div>
    <div class="col-md-4 box5">5 (row 1)</div>
    <div class="col-md-4 box2">2 (row 1)</div>
  </div>
  <div class="row test1 mobile-order">
    <div class="col-md-4 box3">3 (row 2)</div>
    <div class="col-md-4 box6">6 (row 2)</div>
    <div class="col-md-4 box4">4 (row 2)</div>
  </div>
</div>

不过，它尚未得到广泛支持。

Answer 2

如果使用单个 行 是一个选项，带有包装的基本 flexbox 将通过媒体查询来处理这个问题。

[class*="box"] {
  border: 1px solid grey;
}
.mobile-order {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 992px) {
  .mobile-order {
    display: flex;
    flex-direction: column;
  }
  .test1 {
    order: 1;
  }
  .test2 {
    order: 2;
    background: #ccc;
  }
  .box1 {
    order: 1;
  }
  .box2 {
    order: 3;
  }
  .box3 {
    order: 5;
  }
  .box4 {
    order: 6;
  }
  .box5 {
    order: 4;
  }
  .box6 {
    order: 2;
  }
}

<div class="container">
  <div class="row mobile-order">
    <div class="col-md-4 box6">1</div>
    <div class="col-md-4 box5">2</div>
    <div class="col-md-4 box4">3</div>
    <div class="col-md-4 box1">4</div>
    <div class="col-md-4 box2">5</div>
    <div class="col-md-4 box3">6</div>
  </div>
</div>

Codepen.io Demo