Поменять местами два соседних элемента только на CSS

Сегодня экспериментировал с CSS FlexBox и обнаружил, что у flex-блоков может быть установлено свойство order, которое отвечает за порядок следования элементов в контейнере.

Просто приведу простейший пример для div элементов.

HTML

 
Первый элемент
 
Второй элемент
 
Третий элемент
 

CSS

.item { display: flex; /* Указываем что это flex-конейнер*/ flex-direction: column; /* Задаем напревления оси*/ }
.item .header { order: 3; }
.item .body { order: 1; }
.item .footer { order: 2; }

Результат:
Второй элемент
Третий элемент
Первый элемент

Это может быть полезно, если вам приходит какой-нибудь уже сформировавшийся HTML код, который нужно только стилизовать.

#html, #html5, #css