Как поменять направление Flex?

Направление главной оси flex-контейнера задаёт `flex-direction`.

.list {
  display: flex;
  flex-direction: column; /* элементы идут сверху вниз */
}

Значения

• row (по умолчанию) — слева направо;
• row-reverse — справа налево;
• column — сверху вниз;
• column-reverse — снизу вверх.

Что меняется вместе с осью

• justify-content работает по главной оси: при column — по вертикали.
• align-items работает по поперечной: при column — по горизонтали.

Адаптивный пример

.card { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .card { flex-direction: row; }
}

Нюанс доступности

*-reverse меняет только визуальный порядок: скринридер и Tab идут по порядку в HTML.

Коротко для собеседования

flex-direction: row | row-reverse | column | column-reverse; вместе с осью меняется смысл justify-content и align-items.

Подробнее: MDN — flex-direction