无法通过引导获得按顺序排序的div项。

Question

我已经将bootstrap 3.4.1包含在我的Angular 12项目中，并将此HTML放置在我的app.component页面上：

<div class="container">
  ...
  <div class="d-flex row">
    <div class="order-3 col">Third flex item</div>
    <div class="order-2 col">Second flex item</div>
    <div class="order-1 col">First flex item</div>
  </div>
</div>

我预计这将产生三条线：

First flex item
Second flex item
Third flex item

但是它们是按代码中显示的顺序排列的，而不是按照它们的order-X类值指定的。

我做错了什么？

我的全部资料可在这里找到

Answer 1

那些实用程序类属于引导4，您可以使用order-first和order-last来简化

​

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  ...
  <div class="d-flex">
    <div class="col order-last">Third flex item</div>
    <div class="col">Second flex item</div>
    <div class="col order-first">First flex item</div>
  </div>
</div>

​