🎯 CSS order Property

The order CSS property in Flexbox defines the visual order of items inside a flex container.

It allows you to rearrange elements without changing the HTML structure.

You can assign a numeric value (positive or negative). Lower numbers appear first.

.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }
                

Result order: item2 → item1 → item3

Resets the property to its default value (usually 0).

.container {
    display: flex;
}

.item1 { order: 3; }
.item2 { order: 1; }
.item3 { order: 2; }
                

The visual order becomes: item2 → item3 → item1, regardless of HTML order.