Web-разработка

Изменение порядка блоков в Bootstrap 3

, , ,
8 марта 2016, 13:10

Часто возникает ситуация когда нужно поменять местами блоки в Bootstrap 3. Допустим в desktop-версии сайта у вас изображение справа а текст слева. При этом оба блока расположены горизонтально и у каждого своя ширина, разбивающая строку на два равных столбца. В мобильной версии вы делаете так, что у Вас оба блока будут горизонтальными но уже на всю ширину. По умолчанию Bootstrap 3 сделает так, что оба блока будут идти в таком порядке как desktop-версии сайта. То есть текст будет первым, а изображение будет вторым.

Изменение порядка блоков в Bootstrap 3

Сегодня я Вам расскажу какие есть два предусмотренных для этого класса в Bootstrap 3.

Два класса, которые отвечают за это:

.col-*-pull-*
.col-*-push-*

Первый класс .col-*-pull-* перемещает блок вверх. Второй .col-*-push-* перемещает блок ниже.
Основная идея в том, что блоки нужно изначально расположить, так, как вы хотите их видеть в мобильной версии сайта. То есть в данном примере первым будет идти блок с изображением, вторым будет идти блок с текстом.
Вот пример реализации данных блоков:

<div class="col-md-6 col-md-push-6 col-xs-12">[Изображение]</div>
<div class="col-md-6 col-md-pull-6 col-xs-12">[Текст]</div>

Как видно из кода выше, сначала расположен блок с картинкой, потом блок с текстом. Указав класс col-md-push-6 мы говорим что в разрешение md этот блок должен располагаться после следующего блока. А второму блоку ставим класс col-md-pull-6 и говорим тем самым что этот блок должен располагаться перед предыдущим. Вместо col-md-push-* и col-md-pull-* тот класс разрешения экрана, который Вам необходим. Таким образом указав при каком разрешении экрана, будет действовать данное правило.

Кстати это правило часто применяется когда блок sidebar располагается слева. Мы таким же образом можем указать, что в мобильной версии он будет под основным содержанием. Кстати поисковые системы рекомендуют что бы основное содержание в коде было расположено раньше чем блок sidebar. И если придерживаться этого правила и с помощью Bootstrap 3 перемещать sidebar ниже, то в коде как раз основное содержание будет первым.