CSS order Property

What You’ll Learn

The order property lets you change the visual order of flex items without rewriting your HTML. It is a handy tool for responsive layouts and quick rearrangements.

Introduction

The order property in CSS is a part of the Flexible Box Layout Module, commonly known as Flexbox. It allows developers to control the order in which flex items appear within a flex container.

By default, flex items are displayed in the order they appear in the source code. However, the order property enables you to rearrange these items without altering the HTML structure, providing greater flexibility in layout design.

Definition and Usage

Apply order to a flex item (a direct child of a flex container). Lower values appear first; higher values appear later.

Use it for responsive design when you want a sidebar, image, or button to move visually on smaller screens while keeping a logical HTML structure for accessibility.

📝 Syntax

The syntax for the order property is simple. It accepts a single integer value, which determines the item’s position among its siblings within the flex container.

.item {
  order: <integer>;
}

• <integer> — The value can be positive, negative, or zero. The default value is 0.

Basic Example

.container {
  display: flex;
}

.sidebar {
  order: -1;
}

Syntax Rules

• The parent must be a flex container (display: flex or display: inline-flex).
• Items are sorted by order value, then by source order for ties.
• Negative values move items before those with order: 0.
• order also works on grid items inside a grid container.

🎯 Default Value

The default value of the order property is 0. All items have the same order value by default, so they are displayed in the order they appear in the HTML source.

You only need to set order on items that should appear out of their normal source position.

💎 Property Values

Examples Gallery

Reorder flex items with positive, negative, and zero values, then try responsive patterns.

<style>
  .container { display: flex; }
  .item {
    padding: 10px;
    margin: 5px;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
  }
  .item1 { order: 2; }
  .item2 { order: -1; }
  .item3 { order: 0; }
</style>

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

.actions {
  display: flex;
  gap: 0.75rem;
}

.primary {
  order: -1;
}

.layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar {
  order: 2;
}

.main {
  order: 1;
}

@media (min-width: 768px) {
  .layout { flex-direction: row; }
  .sidebar, .main { order: 0; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.featured {
  order: -1;
}

Requires a flex or grid container

order only affects items inside a flex or grid container. The parent needs display: flex, display: inline-flex, or display: grid.

For larger layout changes, also learn flex-direction, flex-wrap, and justify-content alongside order.

.toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

♿ Accessibility

• DOM order matters — Screen readers follow HTML source order, not visual order.
• Keep focus logical — Tab order follows the DOM, which may not match what users see.
• Do not hide important actions — Moving buttons visually can confuse keyboard users if focus jumps unexpectedly.
• Prefer semantic HTML first — Reorder in HTML when possible; use order for responsive visual tweaks.

💡 Best Practices