Bootstrap 5 Flex Order

Bootstrap 5 Flex order class can be used to set the order of the flex items inside the flex irrespective of their position in the DOM. We have to select options to make an item first or the last remaining items will follow the order. The order takes integer values from 0-5 and some custom values are also used.

FBootstrap 5 Flex Order Classes: The '*' can be replaced by sm/md/lg/xl/xxl. '**' can be replaced by 0, 1, 2, 3, 4, 5, first, last

• order-*-**: This class is used to set the order of a flex item to the * index.

Syntax:

<div class="d-flex">
 <div class="order-*-** ">
 ...
 </div>
</div>

Example 1: In this example, we set the order of flex items using flex order classes.

Output:

Example 2: In this example, we set the flex order of a specific flex item to achieve this effect on medium screen size.

Output:

Reference:https://getbootstrap.com/docs/5.0/utilities/flex/#order