仅在一个子节点上使用引导order类来操作该顺序

Question

我在玩柔性盒和引导，我希望使用order类和一些js来制作某种“钉柱到顶”系统，但我遇到了一个问题。

问题：显然只有当所有的子类都有一个订单类时，order类才能正常工作。

工作：

<h3>Each DIVS has order class</h3>
<div class="d-flex bg-light border mb-4">
<div class="p-5 bg-info rounded m-3 text-center font-weight-bold h1 order-2">1</div>
<div class="p-5 bg-info rounded m-3 text-center font-weight-bold h1 order-3">2</div>
<div class="p-5 bg-info rounded m-3 text-center font-weight-bold h1 order-1">3</div>
</div>

不工作：

<h3>Only one DIV has order class</h3>
<div class="d-flex bg-light border mb-4">
<div class="p-5 bg-danger rounded m-3 text-center font-weight-bold h1">1</div>
<div class="p-5 bg-danger rounded m-3 text-center font-weight-bold h1">2</div>
<div class="p-5 bg-danger rounded m-3 text-center font-weight-bold h1 order-1">3</div>
</div>

问题:如果只有一个子类作为订单类，那么有什么办法使订单类工作吗？先谢谢你

Answer 1

引导程序有一个：order-first

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex bg-light border mb-4">
  <div class="p-5 bg-danger rounded m-3 text-center font-weight-bold h1">1</div>
  <div class="p-5 bg-danger rounded m-3 text-center font-weight-bold h1">2</div>
  <div class="p-5 bg-danger rounded m-3 text-center font-weight-bold h1 order-first">3</div>
</div>

​