На десктопі колонки стоять правильно: текст ліворуч, зображення праворуч. Відкриваєте сайт із телефона, і першим іде зображення, а пояснення сповзає вниз, під скрол.

Знайомо? Причина в тому, що на мобільних уся верстка згортається в одну колонку, а порядок блоків залишається жорстким: який у HTML перший, той і зверху. Змінювати HTML заради мобільних ніхто не хоче: це дублювання секцій або милиці з display: none.

CSS дає інструмент, який розв'язує проблему без правлення верстки,, властивість order у зв'язці з flexbox. Один рядок у медіа-запиті, і блоки міняються місцями.

💡 Швидкий огляд:

• Як flexbox керує порядком блоків без зміни HTML
• CSS-код для заміни місцями двох колонок на мобільних
• Як застосувати класи через page builder (на прикладі King Composer)
• Готовий сніпет: копіюєте, підставляєте свої класи, перевіряєте

Як працює CSS order: коротко про головне

Flexbox уміє не лише вирівнювати елементи по горизонталі та вертикалі. Кожен flex-елемент має числову властивість order, яка визначає його візуальну позицію незалежно від місця в HTML.

Типово order: 0 в усіх елементів, вони йдуть у тому порядку, в якому записані в коді. Але варто задати одному блоку order: 1, а іншому order: 2, і браузер переставить їх. Менше число завжди йде першим.

Найкорисніше: order працює всередині медіа-запиту. На десктопі блоки стоять як звичайно, а на екранах до 768px міняються місцями. При цьому HTML залишається недоторканим, пошуковики бачать вихідний порядок, доступність не страждає. MDN підтверджує: visual order змінюється, tab order, ні (поки не чіпаєте tabindex).

Зверніть увагу: order працює тільки всередині flex-контейнера. Батьківський блок повинен мати display: flex або display: inline-flex. Без цього властивість order ігнорується.

Покроковий розбір: застосовуємо order на практиці

Розгляньмо типову секцію: дві колонки в ряд на десктопі, одна над одною на мобільних. Завдання: на телефоні друга колонка (зображення) має бути ПЕРШОЮ, а перша (текст), другою.

Крок 1: готуємо HTML-структуру

Базова розмітка: батьківський контейнер і два дочірні блоки. Порядок у HTML: спочатку текст, потім зображення. Саме таку структуру генерує більшість page builder-ів, зокрема King Composer.

1
<div class="section-wrapper">
2
  <div class="block-text">Текст и пояснение слева</div>
3
  <div class="block-image">Картинка справа</div>
4
</div>

Крок 2: пишемо CSS

Спочатку робимо контейнер flex-контейнером на всіх роздільних здатностях. Потім у медіа-запиті для мобільних задаємо кожному блоку свій order і розтягуємо на повну ширину.

Додайте цей код у Dashboard → Appearance → Customize → Additional CSS вашої теми або через плагін Code Snippets. Не редагуйте файли теми напряму: при оновленні стилі злетять.

1
.section-wrapper {
2
    display: flex;
3
    flex-flow: wrap;
4
}
5
 
6
@media screen and (max-width: 767px) {
7
    .block-image {
8
        order: 1;
9
        width: 100%;
10
    }
11
 
12
    .block-text {
13
        order: 2;
14
        width: 100%;
15
    }
16
}

Розбір: на десктопі обидва блоки, звичайні flex-елементи з order: 0 (значення за замовчуванням згідно зі специфікацією). Текст ліворуч, зображення праворуч, як у HTML. На екранах до 768px спрацьовує медіа-запит: блоку .block-image дається order: 1, він іде першим; блоку .block-text задається order: 2, він стає другим. width: 100% гарантує, що блоки займуть весь екран по горизонталі.

Ключовий момент: класи .block-text і .block-image — це ваш власний неймінг. У реальному проєкті ви чіпляєтеся за ті класи, які генерує ваш page builder або тема.

Крок 3: як задати класи в page builder

Універсальний підхід: будь-який візуальний конструктор (Elementor, Bricks, старий King Composer, рідний Gutenberg через групу) дозволяє додати довільний CSS-клас до секції та колонок. На скріншотах нижче показано процес в інтерфейсі King Composer, але логіка всюди однакова: знаходите поле «CSS Class» або «Extra Class» у налаштуваннях рядка/колонки і вписуєте потрібне ім'я.

Секція з двох колонок у King Composer має такий вигляд:

Батьківському контейнеру (рядок) задаємо клас section-wrapper:

Лівій колонці, клас block-text:

Правій колонці, клас block-image:

Після збереження та публікації перевірте сторінку з телефона або через DevTools браузера (F12 → Toggle Device Toolbar). Блоки повинні помінятися місцями: зображення зверху, текст під ним.

Як адаптувати метод під свій проєкт

Три типові сценарії та що змінювати в коді:

Ви використовуєте інший page builder. Знайдіть поле для довільного CSS-класу в налаштуваннях секції/колонки. В Elementor це Advanced → CSS Classes, у Bricks, Settings → CSS ID & Classes. Вписуєте свої імена класів, у CSS змінюєте селектори на них.

Ви верстаєте вручну, без page builder. Ще простіше: одразу пишете потрібні класи в HTML-розмітку шаблону. CSS-код той самий, просто адаптуєте селектори під свою розмітку.

Блоків не два, а три чи більше. Додаєте в медіа-запит правило для кожного блоку зі своїм значенням order. Наприклад: .block-a { order: 1; }, .block-b { order: 2; } і .block-c { order: 3; }. Числа не зобов'язані йти підряд, можна використати order: 10 для гарантованого переміщення в кінець.

Перевірте, що в батьківського контейнера стоїть display: flex, без цього order мовчки ігнорується, і ви витратите пів години на налагодження. Найчастіший сценарій: контейнер типово display: block, flex задано, але перебито більш специфічним правилом теми. DevTools → Computed покаже підсумкове значення.

Подивіться коротке відео на тему: воно наочно показує, як order переставляє блоки в реальному часі:

⁉️🤔 Часті запитання

Чи працює order в усіх браузерах?

order підтримується всіма сучасними браузерами з 2015 року, зокрема Safari на iOS і Chrome на Android. За даними caniuse.com, глобальна підтримка flexbox, 99,2%. Якщо вам потрібна підтримка IE11 (він flexbox розуміє, але з багами), додайте -ms-flex-order із тим самим значенням.

Чи ламає order індексацію пошуковиками?

Ні. Пошукові роботи читають вихідний HTML сторінки, а order змінює лише візуальний порядок у браузері. Google підтверджує: CSS-перестановки не впливають на ранжування. Вихідний порядок контенту в HTML залишається тим самим.

Чому мій order не працює?

Три найчастіші причини: (1) батьківський блок не display: flex; (2) медіа-запит перебивається більш специфічним правилом теми; (3) у дочірнього елемента display відмінний від block (наприклад, inline), flex-елементом він усе одно стає, але поведінка може відрізнятися. Відкрийте DevTools, вкладка Elements → Computed: перевірте, чи застосовується ваш order і чи не перекреслений він.

Чи можна змінювати порядок через CSS Grid замість flexbox?

Так. У Grid є властивість order, що працює ідентично. Крім того, Grid пропонує альтернативу: можна задати grid-row і grid-column для явного позиціювання елементів без order. Але якщо у вас просто рядок із двох колонок, flexbox простіший, менше коду.

Що робити, якщо page builder не дає додати свій клас?

Деякі старі або урізані builder-и не показують поле CSS Class. У цьому випадку: (1) обгорніть секцію в групу і задайте клас групі; (2) використайте готовий CSS-селектор builder-а (наприклад, .kc-column-12a3b для King Composer), знайдіть його через DevTools; (3) перемкніться на Gutenberg із групою-контейнером, там поле «Additional CSS Class» є в кожного блоку на правій панелі.

Що запам'ятати про зміну порядку блоків

CSS-властивість order — це найлегший спосіб керувати візуальною черговістю блоків без правлення HTML. Гнучкість досягається трьома рядками в медіа-запиті: задали контейнеру display: flex, прописали order: 1 і order: 2 дочірнім блокам на мобільній контрольній точці, готово.

Найнадійніший шлях впровадження: додавайте CSS через Appearance → Customize → Additional CSS або плагін Code Snippets, не чіпайте файли теми. Перед публікацією перевірте сторінку через DevTools на емуляторі iPhone і реальному пристрої. Якщо order мовчить, першим ділом дивіться Computed-значення display у контейнера.

Пробували цей метод на своєму сайті? Напишіть у коментарях, з яким page builder працювали і що міняли місцями.