How do I order css flexbox items?

hoodedvul

Using the code from a previous article: How do I justify content in a column when using flexbox?

The demo code is below.

HTML.

...
 <div class="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
</div>
...

CSS.

     .container {
        height: 500px;
        margin-top: 50px;
        padding: 20px 0;
        background-color: brown;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
      }

      .item {
        width: 50px;
        padding: 10px;
        background-color: burlywood;
        text-align: center;
        font-size: 30px;
      }

The result is:

To change the order, add the CSS code for item-1 as follows: The default is order: 0 and the order is based on the flex direction.

...
item-1 {
   order: 1
}
...

The higher values items are placed behind the other items and using negative values items are placed in front.

...
.item-1 {
  order: 2;
}

 .item-5 {
  order: -3;
}
...

Item 5 is no placed in front.