Order

Learn the visual order of items with order.

What is order?

The order property changes the visual order of a flex item. The default value is 0. Items are sorted by order from smallest to largest, then by source order.

For example, giving an item order: -1 moves it to the front; order: 1 sends it to the back. This only changes the visual order; the HTML position stays the same.

Negative values and visual order

order values can be negative. Values like -1 or -2 push items even further to the front. Items with the same order fall back to source order.

order only changes the visual order. Screen readers and keyboard navigation still follow the HTML order. So keep important content in the right place in HTML, and use order only for visual layout.

Exercise Bring the lead to the front

Add an order declaration to elements inside a .hero container. Give the .hero .lead selector order: -1. Do not touch the .hero container.

Show example solution

/* bring the lead to the front */
.hero .lead {
  order: -1;
}

Test yourself

In a three-item row, the second item gets order: -1. What happens?
- The item moves to the front
- The item moves to the back
- The item disappears
- The order stays the same
Show answer

The item moves to the front — Correct. order: -1 is smaller than the default 0, so the item moves to the front.

Write the order: 1 declaration

.highlight {
  ____: 1;
}

Show answer

.highlight {
  order: 1;
}

Match each order value to its effect

order: -1

Moves to the front
order: 0

Source order
order: 1

Pushes toward the back
order: 2

Pushes further back

Next lesson: Align-self

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies