'Cannot get div items ordered out of sequence with bootstrap

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

csstwitter-bootstrap-3flexbox


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dippas

Related Questions