How to change order in flex box with just CSS

Question

Isn't there a way to change the order of the children of a flex box with just CSS?

<div> flex 2 </div> <div> flex 3 </div> <div style="flex-order:-1"> flex 1 </div>

[CSS 'order' property MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/order) — DBS, Nov 21 '22 at 16:25
[Also: Ordering Flex-Items in general MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items) — ColdIV, Nov 21 '22 at 16:29

Sito8943 · Accepted Answer · 2022-11-21T16:27:28.153

3

you can use the property order .div1 { order: 0; }

But to make it work you should set order to all childrens

Also you should now: 0 for first position, and 1, 2 and so on for other positions

edited Nov 21 '22 at 16:27

answered Nov 21 '22 at 16:25

Sito8943

The default order for flex elements is 0, no need to set that. – ColdIV Nov 21 '22 at 16:36
I also saw that I can use -1 – Visir MG Entertainment Nov 21 '22 at 16:38

Moussa Bistami · Answer 2 · 2022-11-21T16:29:52.257

2

You can use order attribute example:

order: 1;
order: 2;
order: 4;
order: 3;

You can find more here in MDN documentation

edited Nov 21 '22 at 16:29

answered Nov 21 '22 at 16:24

Moussa Bistami

I tried that but the matter is that changes the full order of the flex box, I want to set special orders for children – Visir MG Entertainment Nov 21 '22 at 16:28
1

@VisirMGEntertainment You can use `order` I updated the answer so you can order them as pleased. – Moussa Bistami Nov 21 '22 at 16:30

score 2 · Answer 3 · answered Nov 21 '22 at 16:33

Having an HTML code like this:

<div class="wrapper">
  <div class="item-2">Flex 2</div>
  <div class="item-3">Flex 3</div>
  <div class="item-1">Flex 1</div>
</div>

If you want to change the order of a specific item, you can use the order attribute like this:

.wrapper {
  display: flex;
}

.item-1 {
  order: 1;
}

.item-2 {
  order: 2;
}

.item-3 {
  order: 3;
}

This code will reorder elements: Flex 1 - Flex 2 - Flex 3.

But, if you want to change the order of all items at same time, simply use flex-direction on the wrapper:

.wrapper {
  display: flex;
  flex-direction: row-reverse;
}

This code will reorder elements: Flex 1 - Flex 3 - Flex 2.

3 Answers3