Cannot get div items ordered out of sequence with bootstrap

Question

I have included the bootstrap 3.4.1 in my Angular 12 project and placed this HTML on my app.component page:

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

I expect this to produce three lines:

First flex item
Second flex item
Third flex item

But they are ordered as displayed in the code, rather than as specified by their order-X class values.

What am I doing wrong?

My full source is available here

Please check this if it can help https://stackoverflow.com/questions/37814508/order-columns-through-bootstrap4 — Jayanthi Chalikonda, May 06 '22 at 12:54

score 2 · Accepted Answer · answered May 06 '22 at 12:54

Those utility classes belong to bootstrap 4, you can use order-first and order-last to simplify

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

Cannot get div items ordered out of sequence with bootstrap

1 Answers1