Давайте сразу посмотри демо1 и демо2. Если не смотреть в код, то в обоих примерах нет совершенно никакх различий, конечно, если вы смотрите в большом разрешении. Но давайте попробуем уменьшить. Как видно, в демо2 левый блок находится под правым, т.е. основное содержимое сайта находится выше, чем менее значимый блок.
Если взглянуть в код, то контентная часть опять-таки находится выше обычного сайдбара, а это уже важно для SEO. Давайте рассмотрим, как нам удалось добиться такого эффекта.
Давайте сначала просто попробуем переставить, местами и и вот что у нас получилось (см. демо)
При большом разрешении мы видим, что контентная часть у нас стала ливее, а сайдбар правее. Если уменьшить размер, то все отлично: контент выше, сайдар ниже. Но при большом размере браузера мы все-таки хотим видеть сайдар слева, а контент справа, а при маленьком размере экрана контент сверху, а сайдбар снизу. Давайте это сделаем.
Как мы видим в примере, контент у нас находится выше сайдбара, но чтобы его переместить в браузере переместить вправо нужно добавить несколько классов:
Готово, теперь мы умеем переставлять колонки местами.
Задача такая:
колонка col-sm-9, за ней следует col-sm-3
Нужно чтобы в col-xs-12 они поменялись местами.
Как правильно написать?
Нужно чтобы в мобильной версии зеленый блок был выше красного
- Вопрос задан более трёх лет назад
- 460 просмотров
Вначале выставляем блоки так как они должны быть в итоге, и потом уже пляшем от этого
Категории блога
Часто возникает ситуация когда нужно поменять местами блоки в Bootstrap 3. Допустим в desktop-версии сайта у вас изображение справа а текст слева. При этом оба блока расположены горизонтально и у каждого своя ширина, разбивающая строку на два равных столбца. В мобильной версии вы делаете так, что у Вас оба блока будут горизонтальными но уже на всю ширину. По умолчанию Bootstrap 3 сделает так, что оба блока будут идти в таком порядке как desktop-версии сайта. То есть текст будет первым, а изображение будет вторым.
Сегодня я Вам расскажу какие есть два предусмотренных для этого класса в Bootstrap 3.
Два класса, которые отвечают за это:
Первый класс .col-*-pull-* перемещает блок вверх. Второй .col-*-push-* перемещает блок ниже.
Основная идея в том, что блоки нужно изначально расположить, так, как вы хотите их видеть в мобильной версии сайта. То есть в данном примере первым будет идти блок с изображением, вторым будет идти блок с текстом.
Вот пример реализации данных блоков:
Как видно из кода выше, сначала расположен блок с картинкой, потом блок с текстом. Указав класс col-md-push-6 мы говорим что в разрешение md этот блок должен располагаться после следующего блока. А второму блоку ставим класс col-md-pull-6 и говорим тем самым что этот блок должен располагаться перед предыдущим. Вместо col-md-push-* и col-md-pull-* тот класс разрешения экрана, который Вам необходим. Таким образом указав при каком разрешении экрана, будет действовать данное правило.
Кстати это правило часто применяется когда блок sidebar располагается слева. Мы таким же образом можем указать, что в мобильной версии он будет под основным содержанием. Кстати поисковые системы рекомендуют что бы основное содержание в коде было расположено раньше чем блок sidebar. И если придерживаться этого правила и с помощью Bootstrap 3 перемещать sidebar ниже, то в коде как раз основное содержание будет первым.