Flexbox reorder elements

How to reorder HTML elements with CSS flexbox

by remarkablemark

HTML

<div id="container">
  <div id="order2">2</div>
  <div id="order3">3</div>
  <div id="order1">1</div>
</div>

CSS

#container {
  display: flex;
  flex-flow: column;
}

#order1 {
  order: 1;
}

#order2 {
  order: 2;
}

#order3 {
  order: 3;
}

JavaScript

/**
 * https://remarkablemark.org/blog/2022/01/10/css-flexbox-reorder-elements/
 */