На десктопе колонки стоят правильно: текст слева, картинка справа. Открываете сайт с телефона, и первым идёт изображение, а пояснение уползает вниз, под скролл.

Знакомо? Причина в том, что на мобильных вся вёрстка схлопывается в один столбец, а порядок блоков остаётся жёстким, какой в 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 работали и что меняли местами.