Сегодня экспериментировал с 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 код, который нужно только стилизовать.