Мы превратили карточки во флекс-контейнеры и сделали так, чтобы элементы выстроились сверху вниз. Теперь мы можем поменять местами заголовок и картинку, как того требует макет.

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

.element {
  order: 5;
}

Элементы выстраиваются от меньшего значения order к большему. Если у нескольких элементов одинаковое значение, используется их порядок в разметке.

Рассмотрим пример. Есть четыре разноцветных блока:

Используем order, чтобы изменить их порядок:

.green {
  order: 1;
}

.orange {
  order: 0;
}

.blue {
  order: -1;
}

.pink {
  order: 0;
}

В результате блоки выстроятся в таком порядке:

Первым оказался синий блок, потому что у него самое маленькое значение order. Следующее по возрастанию значение у оранжевого и розового блоков, но в разметке оранжевый идёт раньше. Самое большое значение order у зелёного блока, поэтому он отобразился последним.

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

Потренируемся задавать разные значения order, чтобы понять, как работает это свойство. А затем поменяем местами заголовок и картинку.