Colevate Online Tech Tutorials

The order property controls the order in which flex items appear in the flex container. Items with a lower order value appear first. The default value is 0.

Example 1: Basic Reordering

.flex-container {
  display: flex;
  border: 1px solid #000;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightcyan;
  border: 1px solid #000;
}

.item-1 {
  order: 2; /* Will appear second */
}

.item-2 {
  order: 1; /* Will appear first */
}

Explanation

Despite .item-1 coming first in the HTML, .item-2 is displayed first because its order value of 1 is lower than .item-1's value of 2.

Example 2: Negative Order

.flex-container {
  display: flex;
  border: 1px solid #000;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightyellow;
  border: 1px solid #000;
}

.first-item {
  order: -1; /* Will appear before items with the default order of 0 */
}

Explanation

The order property accepts negative values. The .first-item is moved to the beginning of the container because -1 is less than the default order of 0 for the other items.

Example 3: Ordering a Mix of Items

.flex-container {
  display: flex;
  border: 1px solid #000;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lavender;
  border: 1px solid #000;
}

.a { order: 3; }
.b { order: 1; }
.c { order: 2; }

Explanation

The items are reordered based on their order values. The final display order will be B, C, A, demonstrating how to completely customize the visual order of elements.

Example 4: Using the Same Order

.flex-container {
  display: flex;
  border: 1px solid #000;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lemonchiffon;
  border: 1px solid #000;
}

.item-1 { order: 1; }
.item-2 { order: 1; }
.item-3 { order: 0; }

Explanation

If multiple items have the same order value, their relative order is determined by their source order in the HTML. Here, .item-3 comes first (order 0), followed by .item-1 and then .item-2.

Example 5: Promoting an Item

.flex-container {
  display: flex;
  border: 1px solid #000;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid #000;
}

.featured {
  order: -1; /* Moves this item to the front */
  font-weight: bold;
}

Explanation

This is a common use case for order. A "featured" item can be moved to the beginning of a list for emphasis, regardless of its position in the document structure.

Example 6: Responsive Ordering

.flex-container {
  display: flex;
  flex-direction: column; /* Items are stacked vertically */
  border: 1px solid #000;
}

.flex-item {
  width: 100px;
  height: 50px;
  background-color: lightgreen;
  border: 1px solid #000;
}

@media (min-width: 600px) {
  .flex-container {
    flex-direction: row; /* On wider screens, items are in a row */
  }
  .main-content { order: 2; }
  .sidebar { order: 1; }
  .header { order: 0; }
}

Explanation

The order property is very powerful for responsive design. Here, the layout is a single column on mobile, but on wider screens, it becomes a row with a custom order for the header, sidebar, and main content.

Example 7: Ordering with Gaps

.flex-container {
  display: flex;
  border: 1px solid #000;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightpink;
  border: 1px solid #000;
}

.one { order: 10; }
.two { order: 20; }
.three { order: 5; }

Explanation

The actual numerical values of order don't matter as much as their sequence. Even with large gaps between the order numbers, the items will be arranged from the lowest value to the highest: .three, .one, then .two.

CSS

Order Property