Как поменять местами блоки div в мобильной версии сайта

Не секрет, что мобильная версия сайта себя изжила. Имеется в виду мобильная версия, которая, по-сути, отдельный сайт заточенный под малюсенькие экраны. В моде прогрессивное решение, называемое адаптивной версткой.

Смотрите сами. Как работала мобильная версия? Сайт определял, что его открывают в мобильном браузере, и вместо обычной, выводил мобильную версию.

Какие минусы у такого подхода? Например, новый браузер или операционная система, отсутствуют в списке тех, на которые надо реагировать мобильной версией. И что тогда? Вылезет обычная. Впрочем, главный недостаток — сама разработка отдельной версии. Потом, любые изменения приходится проводить уже в двух шаблонах, да и стоимость работ увеличивается. На эту тему можно долго рассуждать, но здесь и остановимся.

Скажу только, что если вопросы разработки web-ресурсов вызывают у вас сложности, а сайт нужен уже в ближайшее время, то выгоднее обратиться к специалистам и заказать. Где угодно. Например, тут. Потому, что каждый должен заниматься своим делом. Веб-мастер — делать сайты. Предприниматель — деньги.

Адаптивная верстка

Адаптивной верстке глубоко плевать на чем запускается сайт. Он просто приспособится под ширину экрана от, допустим, 480px в ширину до 2400px и выше. Т.е., что мобила, что широченный телевизор, сайту все-едино. Прелесть, правда?)

Чтобы не мучиться и не изобретать свой велосипед, кое-кто придумал Bootstrap. Это готовый набор js и css файлов. При том, Bootstrap позволяет делать с сайтом много чего интересного, и сам по себе заслуживает не просто отдельного поста, а целой серии. Я сам знаю о нем всего-ничего, но даже этого хватило, чтобы оценить возможности и удобство.

Перемещение блоков

А теперь о главном. Сейчас как раз верстаю очередной сайт. В его шапке четыре блока идущие друг за другом. Ну вот так, как на рисунке.

1

Проблема в том, что на узких экранах они выстраиваются вот так.

2

Мне же нужно, чтобы вот так.

4

Конечно это можно сделать несколькими способами без всякого Bootstrap’а. Но во-первых, в данном проекте я его УЖЕ использую. Точнее, только сетку от него, но и этого будет достаточно. Во-вторых, давайте кратенько эти способы перечислю.

Способ 1: float (css)

Способ вполне годный, когда надо передвинуть поменять местами пару колонок. В моем случае двигаются сразу три колонки, в т.ч. по вертикале. Неудобно!

Способ 2: flex (css)

Слишком много возни. Да и деформирует блоки так, как мне не нужно.

Способ 3: jQuery (Java Script)

На самом деле это сразу несколько способов. Отлавливаем разрешение экрана и в зависимости от нее скрипт будет перемещать блоки. Но это долго и это костыли. Что если таких передвигаемых блоков окажется штук 50 по всей странице? Под каждый писать отдельный код? Я уже молчу как это скажется на быстродействии сайта.

Способ 4: Bootstrap

А теперь Bootstrap. Все предельно просто. Имеем html-код.

<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

Если разделить шапку на 12 частей, то на экране over 1200px, в моем проекте, первый div занимает 2/12, второй 5/12, третий 3/12, четвертый 2/12. На экранах менее 700+px каждый блок занимает целую строку (12/12).

Для примера возьму всего два размерных класса сетки Bootstrap: .col-lg-* (широкий экран от 1170px) и col-sm-* (узкий экран 750px и меньше).

Вот так выглядит код после присвоения указанных классов.

<div class="row">
<div class="col-lg-2 col-sm-12">1</div>
<div class="col-lg-5 col-sm-12">2</div>
<div class="col-lg-3 col-sm-12">3</div>
<div class="col-lg-2 col-sm-12">4</div>
</div>

Видите? Размер блоков для разных экранов, согласно сетке (из 12 ячеек), выражен цифрой в классе.

Оптимизируем html-код под узкий экран. Т.е. просто изменим порядок блоков под мобильный экран, а двигать будем на уже крупном. Так легче.

<div class="row">
<div class="col-lg-5 col-sm-12">2</div>
<div class="col-lg-3 col-sm-12">3</div>
<div class="col-lg-2 col-sm-12">1</div>
<div class="col-lg-2 col-sm-12">4</div>
</div>

На мобиле все выстроилось как требовалось. Зато на обычном мониторе порядок изменился, чего нам изначально не нужно.

5

Добавим классы, которые поменяют местами блоки для широкоэкранной версии сайта так, чтобы они шли в изначальном порядке (1, 2, 3, 4), а в мобильной остались соответственно разметке (2, 3, 1, 4).

col-lg-pull-* перемещает блок влево.
col-lg-push-* перемещает блок вправо.

<div class="row">
<div class="col-lg-5 col-sm-12 col-lg-push-2">2</div>
<div class="col-lg-3 col-sm-12 col-lg-push-2">3</div>
<div class="col-lg-2 col-sm-12 col-lg-pull-7">1</div>
<div class="col-lg-2 col-sm-12">4</div>
</div>

Всё. Теперь на мониторе колонки строятся так, как и требовалось изначально.

1

Забавный факт

Здесь есть одна странность, которую не совсем понял. Цифра в классе col-lg-push-* указывает на какое количество ячеек нужно сдвинуть правый край блока вправо. Так блок с цифрой 2 был сдвинут на 2 ячейки. То же самое произошло с блоком с цифрой 3.

В итоге, в начале сетки освободилось 2 ячейки под блок с цифрой 1. НО, чтобы туда добраться нужно преодолеть влево 8 ячеек, а блоку хватило 7.
Из этого (проведя несколько экспериментов) делаю вывод, что цифра в классе col-*-pull-* указывает сдвиг блока влево на указанное число ячеек минус 1. В моем случае 7 (8-1).

О том, как подключить сетку Bootstrap к сайту, в рамках этого поста, освещать не стану. Инфы на данную тему в интернете и так полно. И все же, возможно, в будущем сделаю под это дело отдельный пост.

Однако, вы уже видите, насколько Bootstrap удобен. Всего-то и делов, что присвоить блокам нужные классы.

На этом пока всё. Не забывайте подписываться на обновления блога и делиться ссылкой на этот пост с друзьями в соцсетях. Спасибо, что читаете.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *