TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

WordPress, CSS – Меняем блоки местами для мобильных устройств (пример King Composer)

2 744

Уверен в Вашей практике верстки сайтов встречались такие задачи когда для ПК необходимо отобразить блоки в одном порядке, а на мобильных устройствах в другом, и часто бывает так что в противоположном.

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

Пример применения CSS

Конечно Вы можете адаптировать данный пример под свои нужды, так как сам по себе метод очень даже прост.

Принцип работы на примере HTML элементов:

.kc-row-container.kc-container.Post_PC_MOB > .kc-wrap-columns{ display: flex !important; flex-flow: wrap !Important; } @media screen and (max-width:767px){ .Post_MOB_Right { order: 2; width: 100% !important; } .Post_MOB_Left { order: 1; width: 100% !important; } }

После применения стилей у нас получится следующее расположение объектов:

[Post_PC_MOB] Post_MOB_Left Я блок с картинкой справа Post_MOB_Right Я блок с текстом слева [/Post_PC_MOB]

Как работать с данными классами в King Composer?

Все просто, необходимо только добавить css код который находится в css коде выше, и применить классы как указано на скринах ниже.

Допустим мы имеем секцию в которой находится две колонки (блока) и визуально в King Composer’e это все дело будет выглядеть так:

Левая и правая колонки

Применяем класс для родительского блока:

Применяем класс css

Применение класса для левой колонки:

Применение класса для левой колонки

Применение класса для правой колонки:

WordPress, CSS – Меняем блоки местами для мобильных устройств (пример King Composer)

Вот и все, спасибо за внимание.

Источник записи:

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. ПринимаюПодробнее