order

Definition

The order CSS property is used in flexbox layouts to control the order in which flex items are displayed within their flex container. It specifies the order of appearance for individual flex items, overriding their default order based on their position in the source code.

The order property accepts integer values, with a lower value indicating an earlier position and a higher value indicating a later position. By default, flex items have an order value of 0.

Here’s an example:

.item {
  order: 2;
}

In this example, the .item class sets the order of a flex item to 2. This means it will be positioned after items with a lower order value or before items with a higher order value within the flex container.

You can adjust the order values of flex items to rearrange their order of appearance. For instance, setting order: 1 would place the item before other items with the default order, while setting order: -1 would position it before items with an order value of 0.

The order property is a powerful tool for controlling the visual order of flex items, allowing you to create flexible and responsive layouts. It enables you to customize the sequence of elements based on your design requirements, independent of their source code order.

Syntax

.card__meta {
  order: -1;
}

Values

<integer>: lower numbers appear earlier in the main axis.
0 is the default order.

Practical Examples

.card {
  display: flex;
  flex-direction: column;
}

.card__meta {
  order: -1;
}

Reorder flex items without altering source order.

HTML

Meta first

Card Title

Reordering flex items allows meta information to appear before the heading on narrow layouts.

Code

<div class="flex w-full max-w-sm flex-col gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
  <div class="order-[-1] rounded-lg bg-slate-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-600">Meta first</div>
  <h3 class="text-lg font-semibold text-slate-900">Card Title</h3>
  <p class="text-sm text-slate-600">Reordering flex items allows meta information to appear before the heading on narrow layouts.</p>
</div>

Tips & Best Practices

Use order sparingly—logical DOM order should still match reading order for accessibility.
Negative orders surface elements before default siblings.

Accessibility & UX Notes

Only reorder purely visual elements; keep semantic/DOM order aligned for screen readers.

Browser Support

Supported in all modern browsers.

flex-direction to change axis order.
grid-row/grid-column for CSS Grid reordering.