0
191
2018-12-20

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

В данном примере мы рассмотрим простой способ благодаря которому можно поменять блоки местами во время отображения сайта на мобильных устройствах только при помощи CSS.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

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

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

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

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

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

<div class="kc-row-container  kc-container  Post_PC_MOB">
    <div class="Post_MOB_Right"> Я блок с текстом слева</div>
    <div class="Post_MOB_Left"> Я блок с картинкой справа</div>
</div>

Стили отвечающие за изменение расположения блоков для мобильных устройств:

.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

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

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

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

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