弹性顺序直到父元素之外

Question

我想使用弹性顺序直到父元素之外

<div class="flex-wrap">
        <div class="flex-container">
            <div class="first"></div>
            <div class="second"></div>          
        </div>

        <div class="third">
            <img>
        </div>
 </div>

在这种情况下，我在 flex-wrap 类中应用了 css，如下所示。

    display: flex;
    flex-direction: column;

现在显示为，

首先
第二个
第三

我怎样才能订购，

首先
第三
第二个
？

我尝试了 CSS 中的订单值，以多种方式...... 但没有成功。

Answer 1

使用

display:contents

“打开”内部包装器，然后使用

order

重新排列整个包装器中的元素。

.flex-container {
  display: contents;
}

.flex-wrap {
  display: flex;
  flex-direction: column;
}

.second {
  order: 1;
}

<div class="flex-wrap">
  <div class="flex-container">
    <div class="first">First</div>
    <div class="second">Second</div>
  </div>

  <div class="third">
    Third
  </div>
</div>