• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 3/13/23

Reorder elements

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;
}
Reordered elements with the order property
Reordered elements with the order property

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.

Ever considered an OpenClassrooms diploma?
  • Up to 100% of your training program funded
  • Flexible start date
  • Career-focused projects
  • Individual mentoring
Find the training program and funding option that suits you best
Example of certificate of achievement
Example of certificate of achievement