How can you explicitly reorder items in a flexbox container?

The default order of the flex items is defined by their physical position in the flex container HTML element. To reorder the flex items, you can set for each of them the style order: <some_number>. The items are then sorted by the number from the lowest to the greatest.

The following code will make the flex items display in the order A-B-C.

CSS

.container {
  display: flex;
  flex-direction: row;
}

.a {
  order: 1;
}

.b {
  order: 10;
}

.c {
  order: -10;
}

HTML

<div class="container">
  <div class="a">Two</div>
  <div class="b">Three</div>
  <div class="c">One</div>
</div>