Re-order HTML elements with the CSS flexbox order property

Basic rules to know before using the CSS order property

As usual you can not use a CSS property anywhere or in any situation; there are some rules to respect.

1. All the elements must be contained in the same container, the same block: they must be siblings. It is not possible to select elements from different parts of a website page to re-order them except if they have the same HTML level.
2. When the elements are similar — I mean they have the same HTML tag, the same CSS class name —, it is possible to use the :nth-child() pseudo-selector to select them individually and apply a new order. In case they are not, use different selectors and apply the correct order to each of them…
3. As the order property is a flexbox property, the container CSS display property must be… flex!

Let’s have a look at the HTML code example

As you can see, the code above is made of similar elements which have the same class name and are contained in the same container. It will be possible to re-order them to match an ascending order.

Remark: it would also be possible to re-order them in a descending order or any order we need. I have chosen an ascending because the result would be more visible, more obvious.

Basic use of the CSS order property

This example is simple, all the elements are in the same container and they have the same class name. It respects the basic rules. So, we just have to:

• apply the display: flex; property to the container selected with its ID #container;
• select the siblings elements one by one with the class name .element and the :nth-child() pseudo-selector (to select the first one indicate :nth-child(1));
• apply the order: CSS property and indicate the correct order value from the first to the umpteenth..

Help: The correct order should be 1 2 3 4 5 but the 2 and 3 have been reversed, the 4 and 5 have also been reversed. For example, the second element .element:nth-child(2) should be the third; that means the order value will be 3.

Let’s have a look to the final code below.

See the Pen
re-order HTML elements with CSS order by Coding-Tricks (@coding-tricks)
on CodePen.

Re-ordering every element one by one everything is perfect: we have obtained the expected result! Maybe could we be more efficient?

The error you must avoid when using the CSS order property

The basic use of the CSS order property we have just discovered above seems to be very easy to use. The matter is that we have selected all the elements one by one and applied a new order value… That could be a very tedious activity!

Let’s try re-ordering the misplaced elements. Maybe we could spare time…

In this second example, the HTML order is 13245. The elements to inverse are 3 and 2. Easy!

The CSS code could be shorter, could not it be?

Oops, what a crash! The result should have been 12345 but we obtain 14523!

See the Pen
re-order some HTML elements with CSS order by Coding-Tricks (@coding-tricks)
on CodePen.

What happened?

In fact, all the elements which have not been re-ordered are placed at the beginning, respecting the initial HTML order. Then, the re-ordered elements are displayed respecting the applied order. We could consider that all the unchanged elements have no order or the order 1…

It is obvious that it is not the best solution! Forget it! Do not be too lazy! In that case, spare time means re-do the task. What a loss of time!

However, even if the obtained result is not the expected one, we have just discovered two important advanced rules which could be interesting in other situations…

• HTML elements not re-ordered with the CSS order property are displayed first.
• HTML elements not re-ordered with the CSS order property or elements having the same order value (no value in our example) respect the original HTML elements order.

Is there a solution to spare time? Yes, I think so… Just read the end of the article below!

Useful advanced rules when using the CSS order property

We have already seen that it is possible to apply a new order to an HTML element.

Being lazy we have discovered that we could work by groups: when applying the same value to many elements, they are displayed as a group respecting the original HTML order.

Let’s try to apply those rules to the same example.

HTML elements having the same order value respect the original elements order

1. We could consider that if we remove the second element named “3”, finally the third element named “2” would be in correct position.
2. What if we apply the same value to the first and third element? They would be displayed as “12” in a same “group”. Seems to be okay. Let’s do that.
3. As we need theme to be at the beginning, let’s apply the order value 1.
4. Then we need “3” to be displayed. As “1” and “2” are level 1, it seems obvious to apply the value 2 if we want it to follow them.
5. The elements “4” and “5” are in the correct order. We could apply them the same value like 3 because we want them to be displayed after “3”.

As the HTML code is the same as the previous example, I do not insert it once again. Remember that the initial order is 13245 and we expect 12345 as a result.

Find the CSS code using “groups” below

As “4” and “5” are in correct order and follow “3” we could simplify the CSS code and put those three elements in the same level group: 2. The final code could be the one below.

See the Pen
re-order HTML elements by groups with CSS order by Coding-Tricks (@coding-tricks)
on CodePen.

HTML elements not re-ordered with the CSS order property are displayed first

Do you remember when we have discovered that not applying a CSS order value the elements were displayed before the re-ordered ones? Let’s try to use this peculiarity.

Do not apply an order value on the “1” and “3”: they will be displayed first. Apply the order value 1 to the other elements and they will be displayed after in correct order.

We obtain the expected result!

See the Pen
HTML elements with no CSS order value are displayed first by Coding-Tricks (@coding-tricks)
on CodePen.

Imagine that you have only one element to remove and replace at the last position; that would be a quick solution.

HTML elements on which is applied a CSS order value -1 are displayed first

Usually, we order elements from 1 to umpteenth. The CSS order property accept negative value. When applying a -1 order value to an element, we oblige it to be displayed before the ones re-ordered with positive values or without values.

We obtain the expected result!

See the Pen
HTML elements with a negative CSS order value are displayed first by Coding-Tricks (@coding-tricks)
on CodePen.

Imagine that you have only one element to remove and replace at the first position; that would be a quick solution.

Remark: A HTML element having an -2 order value will be displayed before the one having the -1 value.

In conclusion

Finally, this CSS order property is very useful and not so difficult to use but we have to think before starting to code…