Create Web Page Layouts With CSS

Flexbox allows you to easily reorder items depending on your layout needs. As you'd expect, the property that lets you set ordering is called  order .  In the example we've been using so far (with 6 different elements), let's reorder them to show all the odd elements first, followed by the even numbers: 

.container div:nth-child(1) {
  order: 1;
}

.container div:nth-child(3) {
  order: 2;
}

.container div:nth-child(5) {
  order: 3;
}

.container div:nth-child(2) {
  order: 4;
}

.container div:nth-child(4) {
  order: 5;
}

.container div:nth-child(6) {
  order: 6;
}

I could set outrageous values, and as long as the values are in order (ex. the first element's  order  value is lower than second element's  order  value), the ordering will still happen the way we want:

.container div:nth-child(1) {
  order: 1;
}

.container div:nth-child(3) {
  order: 30;
}

.container div:nth-child(5) {
  order: 900;
}

.container div:nth-child(2) {
  order: 950;
}

.container div:nth-child(4) {
  order: 12000;
}

.container div:nth-child(6) {
  order: 2500000;
}

Of course, you should try to use logical values instead of extreme ones! The wild numbers above are just to illustrate a point.

Your Turn

Try reordering elements for yourself in this interactive exercise:

In style.css, find the style rules for each child of the div with the class of container.

Add an order property to each child so that the children appear in the following order:

• The "6" rectangle should appear first.

• The "4" rectangle should appear second.

• The "2" rectangle should appear third.

• The "5" rectangle should appear fourth.

• The "3" rectangle should appear fifth.

• The "1" rectangle should appear last. 

Recap

• Use the  order  property to reorder elements in your layout without touching the HTML.