Порядок следования flex-элемента (свойство order) | Flexbox | CSS

Flexbox (флексбокс) предназначен для вёрстки гибких макетов. Ежели свойство display контейнера принимает значение flex, его прямые потомки становятся flex-элементами, порядком следования которых можно управлять с помощью свойств flex-flow и order.

order

<style>
.raz {
  display: flex;
  flex-flow: wrap;
  background: green;
}
.raz div {
  margin: .5em;
  padding: 1em;
  background: rgb(255, 255, 0);
}
.raz div:nth-child(2) {
  order: 0;
  background: red;
}
.raz div:nth-child(3) {
  order: 1;
}
.raz div:nth-child(4) {
  order: 2;
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Если у flex-элементов одинаковое значение order, то нижние в коде теги показаны после верхних (поведение по умолчанию)

<style>
.raz {
  display: flex;
  flex-flow: wrap;
  background: green;
}
.raz div {
  margin: .5em;
  padding: 1em;
  background: rgb(255, 255, 0);
  order: 3;  /* у всех flex-элементов order: 3; */
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Чем меньше значение order, тем раньше показан flex-элемент

Переместить 3-ий flex-элемент первым

<style>
.raz {
  display: flex;
  flex-flow: wrap;
  background: green;
}
.raz div {
  margin: .5em;
  padding: 1em;
  background: rgb(255, 255, 0);
}
.raz div:nth-child(3) {
  order: -1;  /* у остальных flex-элементов order: 0; */
  background: red;
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Поместить 3-ий flex-элемент последним

<style>
.raz {
  display: flex;
  flex-flow: wrap;
  background: green;
}
.raz div {
  margin: .5em;
  padding: 1em;
  background: rgb(255, 255, 0);
}
.raz div:nth-child(3) {
  order: 1;  /* у остальных flex-элементов order: 0; */
  background: red;
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Поставить flex-элемент с классом .ad третьим

<style>
.raz {
  display: flex;
  flex-flow: wrap;
  background: green;
}
.raz div {
  margin: .5em;
  padding: 1em;
  background: rgb(255, 255, 0);
}
.raz .ad {
  background: red;
}
.raz div:nth-child(n+3):not(.ad) {  /* у flex-элементов, следующих после третьего номера включительно, кроме того, кто имеет класс .ad */
  order: 1;
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="ad">5</div>
  <div>6</div>
</div>

Поменять flex-элементы рандомно (хаотично, беспорядочно, случайным образом)

<style>
.raz {
  display: flex;
  flex-flow: wrap;
  background: green;
}
.raz div {
  margin: .5em;
  padding: 1em;
  background: rgb(255, 255, 0);
}
.raz div:nth-child(1) {
  order: 1;
}
.raz div:nth-child(2) {
  order: 2;
}
.raz div:nth-child(3) {
  order: 3;
}
.raz div:nth-child(4) {
  order: 4;
}
.raz div:nth-child(5) {
  order: 5;
}
.raz div:nth-child(6) {
  order: 6;
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Свойство order меняет только визуальный порядок

То есть по прежнему в порядке, указанном в HTML-коде, будет осуществляться

1. сканирование/воспроизведение страницы программами чтения, поисковыми роботами,
2. переход по ссылкам с помощью клавиши клавиатуры Tab, искл., Mozilla Firefox (можно менять с помощью атрибута tabindex).

Пример: боковую колонку поменять местами с центральной с помощью CSS

<style>
main {
  display: flex;
  flex-flow: wrap;
  padding: .5em 0 .5em .5em;
  text-align: center;
  color: #fff;
  background: #595959;
}
article,
aside {
  margin-right: .5em;
}
aside {
  flex: 0 1 7em;
  order: -1;
  background: #3b3b3b;
}
article {
  flex: auto;
  background: #4b4b4b;
}
@media (max-width: 30em) {
  main {
    display: block; /* у не flex-элементов свойство order не работает */
  }
}
</style>

<main>
  <article><code>&lt;article&gt;</code><br><br></article>
  <aside><code>&lt;aside&gt;</code></aside>
</main>