Поменять местами div блоки вертикально. Flexbox CSS.
Краткая заметка по вертикальной смене порядка блоков <div> и других элементов документа html:
Поддержка браузерами
IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
HTML
<div class="group_block"> <div class="block_1">1й элемент</div> <div class="block_2">2й элемент</div> <div class="block_3">3й элемент</div> </div>
CSS
.group_block { display: flex; flex-direction: column; /* flex-direction: column-reverse; /* Включает обратный порядок */ } .group_block .block_1 {order: 3; } /* Отобразится третьим */ .group_block .block_2 {order: 2; } /* Отобразится вторым */ .group_block .block_3 {order: 1; } /* Отобразится первым */
CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. По ссылке ниже можно ознакомиться более подробно.
0 Comments
Recommended Comments
There are no comments to display.