Як поміняти місцями блоки div в мобільній версії сайту

1. адаптивна верстка
2. переміщення блоків
3. Спосіб 1: float (css)
4. Спосіб 2: flex (css)
5. Спосіб 3: jQuery (Java Script)
6. Спосіб 4: Bootstrap
7. кумедний факт

Не секрет, що мобільна версія сайту себе зжила. Мається на увазі мобільна версія, яка, по-суті, окремий сайт заточений під малюсінькі екрани. У моді прогресивне рішення, зване адаптивної версткою.

Дивіться самі. Як працювала мобільна версія? Сайт визначав, що його відкривають в мобільному браузері, і замість звичайної, виводив мобільну версію.

Які мінуси у такого підходу? Наприклад, новий браузер або операційна система, відсутні в списку тих, на які треба реагувати мобільною версією. І що тоді? Вилізе звичайна. Втім, головний недолік - сама розробка окремої версії. Потім, будь-які зміни доводиться проводити вже в двох шаблонах, та й вартість робіт збільшується. На цю тему можна довго міркувати, але тут і зупинимося.

Скажу тільки, що якщо питання розробки web-ресурсів викликають у вас складнощі, а сайт потрібен не «коли-небудь», а в прийнятні терміни, то вигідніше звернутися до фахівців і замовити. Де завгодно. Тому, що кожен повинен займатися своєю справою. Веб-майстер - робити сайти. Підприємець - гроші.

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

Адаптивної верстці глибоко плювати на чому запускається сайт. Він просто пристосується під ширину екрану від, припустимо, 480px в ширину до 2400px і вище. Тобто, що мобіла, що широченний телевізор, сайту все-одно. Принадність, правда?)

Щоб не мучитися і не винаходити свій велосипед, дехто придумав Bootstrap. Це готовий набір js і css файлів. При тому, Bootstrap дозволяє робити з сайтом багато чого цікавого, і сам по собі заслуговує не просто окремого поста, а цілої серії. Я сам знаю про нього все-нічого, але навіть цього вистачило, щоб оцінити можливості і зручність.

переміщення блоків

А тепер про головне. Зараз як раз верстаю черговий сайт. У його шапці чотири блоки йдуть один за одним. Ну ось так, як на малюнку.

Проблема в тому, що на вузьких екранах вони шикуються ось так.

Мені ж потрібно, щоб ось так.

Звичайно це можна зробити декількома способами без всякого 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>

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

Додамо класи, які поміняють місцями блоки для широкоекранної версії сайту так, щоб вони йшли в первісному порядку (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>

Усе. Тепер на моніторі колонки будуються так, як і було потрібно спочатку.

кумедний факт

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

У підсумку, на початку сітки звільнилося 2 осередки під блок з цифрою 1. АЛЕ, щоб туди дістатися потрібно подолати вліво 8 осередків, а блоку вистачило 7.
З цього (провівши кілька експериментів) роблю висновок, що цифра в класі col - * - pull- * вказує зсув блоку вліво на вказане число осередків мінус 1. У моєму випадку 7 (8-1).

Про те, як підключити сітку Bootstrap до сайту, в рамках цього поста, висвітлювати не стану. Інформації на цю тему в інтернеті і так повно. І все ж, можливо, в майбутньому зроблю під цю справу окремий пост.

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

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