How to reorder divs using only CSS?

Spread the love

Sometimes, we want to reorder divs using only CSS.

In this article, we’ll look at how to reorder 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.

To reorder divs using CSS, we use flexbox.