flex-direction

Обратите внимание, что значения row и row-reverse зависят от направления flex-контейнера. Если его атрибут dir равен ltr, то row представляет собой горизонтальную ось, направленную слева направо, а row-reverse — справа налево; если атрибут dir равен rtl, то row представляет собой горизонтальную ось, ориентированную справа налево, а row-reverse — слева направо.

Может принимать следующие значения:

row

Главная ось flex-контейнера определена точно так же, как направление текста. Точки main-start и main-end совпадают с направлением контента.

row-reverse

Ведёт себя аналогично row, но точки main-start и main-end переставлены местами.

column

Главная ось flex-контейнера такая же, как ось блока (block-axis). Точки main-start и main-end такие же, как точки before и after режима записи (writing-mode).

column-reverse

Ведёт себя как column, но точки main-start и main-end переставлены местами.

Использование свойства flex-direction со значениями row-reverse и column-reverse создаст различие между визуальным представлением содержимого и его порядком в DOM. Это отрицательно влияет на пользователей с плохим зрением, использующих навигацию с помощью вспомогательных технологий, таких как программы чтения с экрана. Если визуальный порядок важен, пользователи программ чтения с экрана не будут иметь доступа к правильному порядку.

• Flexbox & the keyboard navigation disconnect — Tink
• Source Order Matters | Adrian Roselli
• MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
• Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0

flex-direction = 
  row             | (en-US)
  row-reverse     | (en-US)
  column          | (en-US)
  column-reverse  

HTML

<h4>Пример flex-direction: column-reverse</h4>
<div id="col-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>
<h4>Пример flex-direction: row-reverse</h4>
<div id="row-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>

CSS

.content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
}

#col-rev {
  flex-direction: column-reverse;
}

#row-rev {
  flex-direction: row-reverse;
}

.red {
  background-color: red;
}

.lightblue {
  background-color: lightblue;
}

.yellow {
  background-color: yellow;
}

Результат

• CSS flex-flow — краткая запись CSS-свойств flex-direction и flex-wrap.
• Руководство по CSS Flexbox: Основные идеи Flexbox
• Руководство по CSS Flexbox: Упорядочивание flex-элементов (en-US)