Sometimes, we want to reorder divs using only CSS.
In this article, we’ll look at how to reorder divs using only CSS.
How to reorder my divs using only CSS?
To reorder divs using CSS, we use flexbox.
For instance, we write
<div id="flex">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
to add nested divs.
And then we write
#flex {
display: flex;
flex-direction: column;
}
#a {
order: 2;
}
#b {
order: 1;
}
#c {
order: 3;
}
to make the outer div a flex container with display: flex;
.
We make the flex direction vertical with flex-direction: column;
.
And then we set the order
property for each inner div to set their order in the container.
Conclusion
To reorder divs using CSS, we use flexbox.