Question

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

现在我必须在第1行和顺序中排序并显示cols并在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显示模块第3级引入了display: contents：

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

你可以用它来＆＃34;忽略＆＃34;行和显示内部flex项，就好像它们属于同一个flex容器一样。然后你可以根据需要混合它们。

＆＃13;

.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; }

＆＃13;

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

＆＃13;

但是，它还没有被广泛支持。

Answer 2

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

＆＃13;

[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;
  }
}

＆＃13;

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

＆＃13;

Codepen.io Demo

使用Flexbox在两个不同的行中排序cols

2 个答案: