Bootstrap - Flex Utility Classes Part 2: Direction Control with flex-*

Changing the Flex Direction

You can change how flex items flow with direction utilities.

Example 3: flex-row-reverse

<div class="d-flex flex-row-reverse">

  <div class="p-2 bg-danger">1</div>

  <div class="p-2 bg-success">2</div>

  <div class="p-2 bg-primary">3</div>

</div>

Explanation:

flex-row-reverse flips the order of items, so the last item appears first.

Example 4: flex-column-reverse

<div class="d-flex flex-column-reverse">

  <div class="p-2 bg-dark text-white">A</div>

  <div class="p-2 bg-light">B</div>

</div>

Explanation:

Items are stacked vertically in reverse order using flex-column-reverse.