order

При помощи свойства order можно менять порядок отображения флекс-элементов внутри флекс-контейнера.

В этом примере элемент с классом .item встанет последним, даже если в разметке будет первым.

        
          
          .container {  display: flex;}.item {  order: 3;}
          .container {
  display: flex;
}

.item {
  order: 3;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

По умолчанию элементы отображаются в том порядке, в котором они расположены в разметке, а значение свойства order равно 0. Но это свойство позволяет переставлять их местами.

Значение задаётся в виде целого отрицательного или положительного числа. Элементы встают по возрастающей.

💡 Свойство меняет только визуальный порядок. Стоит помнить об этом. Скринридеры по-прежнему будут читать элементы по порядку расположения в разметке.