Свойство CSS order

Свойство CSS order позволяет задавать порядок расположения элементов внутри flex или grid контейнера. Элементы сортируются по возрастанию значения order, а затем по их порядку в исходном коде. Например, если у вас есть такой HTML код:

<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>

И вы хотите создать классический макет с боковыми панелями, вы можете использовать свойство order так:

main {
  display: flex;
  text-align: center;
}

main > article {
  flex: 1;
  order: 2;
}

main > nav {
  width: 200px;
  order: 1;
}

main > aside {
  width: 200px;
  order: 3;
}

Тогда элементы будут расположены так:

Вы можете узнать больше о свойстве order и других свойствах flexbox на W3Schools или MDN Web Docs.

Источник