CSS flexbox reorder elements

This post goes over how to reorder elements with CSS flexbox.

Problem

Given the HTML markup:

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

How does one reorder the elements with CSS flexbox?

First wrap the HTML elements in a parent container:

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

Then use CSS flexbox order to control the sequence:

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

#order1 {
  order: 1;
}

#order2 {
  order: 2;
}

#order3 {
  order: 3;
}

If there are more elements, add more CSS styles:

#order4 {
  order: 4;
}

#order5 {
  order: 5;
}

/* ... */