Ordering Flexible Elements

In many cases, we rely on the flex-direction property to manage the display order of flexible items.

In addition to this powerful property, we will explore another feature that enables precise control over the order of individual elements within the flex container

The order Property!

What is the "order" Property?

The CSS order property determines the order of a flexible item relative to other flexible items inside the same container.

Syntax

.item-element {
    order: <integer>;
    order: 10;
}

Learn from Demo

Consider the following three blocks (A, B, C) displayed in a row:

Implementing this layout is straightforward using the following HTML snippet:

<div style="display: flex">
    <div class="block-a">A</div>
    <div class="block-b">B</div>
    <div class="block-c">C</div>
</div>

Changing the Order

Suppose we want to move Block B to the last slot:

We can achieve this by simply setting the order property for Block B:

.block-b {
    order: 3
}

The final display will be as desired.