Items Order
We can order flex items by using the property order on each item. The default value of the order property for each flex item is 0.
A positive value will move the item towards the end of the main axis and a negative value will move it towards the start of the main axis.
Example: If we have the flex-direction set to row then a positive value will move the item towards the right and negative value will move it towards the left.
<div class="flex-container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<div class="box4">Box 4</div>
</div>
.flex-container {
background-color: rgb(171, 174, 180);
padding: 1em;
display: flex;
flex-flow: row wrap;
align-items: center;
}
.flex-container .box1{
order: 1;
}
.flex-container .box3{
order: -1;
}