how to set the position order of flex items with css

Question

.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
}

<div class='container' >
  <div class='item' style="background:red;" ></div>
  <div class='item' style="background:blue;" ></div>
  <div class='item' style="background:green;" ></div>
</div>

So div items are in order - red, blue and then green. How can I set them in order - blue, red and then green by using any flex property in css.

score 2 · Accepted Answer · edited Mar 05 '23 at 10:04

2

Try the `order` CSS property

<div class='container' >
  <div class='item' style="background:red; order: 2" ></div>
  <div class='item' style="background:blue; order: 1" ></div>
  <div class='item' style="background:green; order: 3" ></div>
</div>

edited Mar 05 '23 at 10:04

Temani Afif

245,468
26
309
415

answered Mar 05 '23 at 09:59

ProfDFrancis

8,816
1
17
26

how to set the position order of flex items with css

1 Answers1

Try the order CSS property

Try the `order` CSS property