Если необходимо изменить вертикальный порядок блоков на обратный, есть быстрый способ. Как это можно сделать?
flex-direction: column-reverse
Тем временем, flexbox продолжает захватывать мир 🙂 . Привет bootstrap 4 и его гениальная сетка.
А в нашей задаче все начинается с простого. Пишем для нашего блока CSS:
.left_block {
display: flex;
}
display flex “активирует” целый набор различных свойств. При этом, наш HTML выглядит так:
<div class="left_block"> <div class="block_top">top</div> <div class="block_bottom">bottom</div> </div>
Теперь что происходит – структуру мы не меняем, добавляем свойство реверса:
.left_block {
display: flex;
flex-direction: column-reverse;
}
flex-direction: column-reverse, как вы уже догадались, изменит порядок этих блоков в браузере . Конечно если у вас будет 3 колонки или больше:
<div class="left_block"> <div class="block_top">1</div> <div class="block_middle">2</div> <div class="block_bottom">3</div> </div>
то с этим свойством вы увидите их в обратной последовательности:
3 2 1
Приведу пример, почему это может быть удобно (сайт на 1С-Битрикс):
в тех редких случаях, когда информация в левом сайдбаре сначала собралась из шаблона (левое меню каталога), а после дополнилась фильтром из каталога все в том же сайдбаре, то у нас есть 2 пути:
– написать 2 строчки CSS и если блоков больше не будет, это вполне себе хорошее решение, ведь их последовательность не нарушится
– переписать вывод так, чтобы меню при определенных условиях формировалось после фильтра в самом каталоге
Согласитесь, вариант с display:flex выглядит куда проще и практичнее. Плюс ко всему, flex-direction: column-reverse даже если и не поддерживается на каком-либо браузере или устройстве, то ничего не случится, и пользователь просто увидит эти блоки в своем обычном порядке.
