Order

Controls the order of a flexible item relative to its container.

Classes
Class Properties
flex-order-0 order: 0;
flex-order-1 order: 1;
flex-order-2 order: 2;
flex-order-3 order: 3;
flex-order-4 order: 4;
flex-order-5 order: 5;
flex-order-6 order: 6;
Order

Items can be given specific order regardless of their order at the document.

1
2
3

<div class="card flex flex-wrap md:justify-content-between justify-content-center">
    <div class="flex-order-2 font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">1</div>
    <div class="flex-order-1 font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">2</div>
    <div class="flex-order-0 font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">3</div>
</div>

Responsive

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:flex-order-1 to use a responsive class.

  • sm: small screens e.g. phones
  • md: medium screens e.g. tablets
  • lg: large screens e.g. notebooks
  • xl: larger screens .e.g monitors
1
2
3

<div class="card flex flex-wrap md:justify-content-between justify-content-center">
    <div class="md:flex-order-2 font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">1</div>
    <div class="md:flex-order-1 font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">2</div>
    <div class="md:flex-order-0 font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">3</div>
</div>