html - 对 Bootstrap 行使用 Flexbox 顺序

Question

我正在尝试调整两个 Bootstrap 行中列的堆叠顺序。我有两行，每行有两列。在我下面的 JSBin 示例中，我试图将电话上的订单堆叠到事物 a、事物 b、事物 d 和事物 c。

我试图在媒体查询中使用 flex box 来使用 flexbox order 属性调整列的顺序但没有成功。根据我的研究，我用 display:flex 将两行包装在一个包装器 div 中，并在每列上设置顺序，但这不起作用...

https://output.jsbin.com/wixogafebe/

Answer 1

要使 flex order 属性起作用，所有 flex 元素必须是同一个容器中的兄弟。

在您的例子中，您有一个 flex 容器 (.flex) 和两个 flex 元素 (.row)。

一个 flex 元素包含 A 和 B。另一个 flex 元素包含 C 和 D。

在您当前的设置下，只有 flex 元素 (.row) 可以使用 order 属性重新排序。

事实上，A、B、C、D 甚至都不是 flex 元素，因为它们的父级不是 flex 容器。因此 flex 属性将不适用于它们。

为了让您的布局如您所愿，您需要将所有四个元素放在同一个 flex 容器中，以便它们作为同级 flex 元素存在。

例子:

HTML

<div class="container">

    <div class="col-lg-8 col-xs-12 a">        <!-- flex item #1 -->
        <div class="thing">
            Thing A
        </div>
    </div>

    <div class="col-lg-4 col-xs-12 b">        <!-- flex item #2 -->
        <div class="thing">
            Thing B
        </div>
    </div>

    <div class="col-lg-8 col-xs-12 c">        <!-- flex item #3 -->
        <div class="thing">
            Thing C
        </div>
    </div>

    <div class="col-lg-4 col-xs-12 d">        <!-- flex item #4 -->
        <div class="thing">
            Thing D
        </div>
</div>

CSS

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

.col-xs-12 {
    display: flex;
    flex: 0 0 50%;
}

.thing {
    background-color: #eaeaea;
    flex: 1;
    margin: 10px;
    padding: 15px;
}

@media screen and ( max-width: 800px) {

    .a { order: 1; }
    .b { order: 2; }
    .c { order: 4; }
    .d { order: 3; }
    .b > div { background-color: red; }

}

DEMO