null-21-512×500

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

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

Мобильная верстка – очень часто муторное и невеселое занятие, которое заставляет прибегать к таким изворотливый идеям и решением что иногда сам Диву даешься.

В связи с тем что я часто работаю bootstrap, в основном это не вызывало каких-то особых проблем, но один из проектов который создавался при помощи плагина King Composer, заставил меня найти новое интересное решение которые я опишу в данной записи.

Полезные ссылки (очень благодарен этому человеку за информацию):

Начинающим веб разработчиком Очень советую подробно ознакомиться со статьёй по ссылке, дабы более детально разобраться с возможными решениями по перемещению блоков. Человек написал от души и достаточно подробно.

http://ktvd.ru/kak-pomenyat-mestami-div-v-css/

CSS стили для того чтобы поменять блоки местами:

 

 

Для того чтобы вся магия заработала в блоках созданных при помощи плагина King Composer примените классы и ID для блоков как указано ниже:

  1. Применим ID roditel-dla-vertikalnuh-blokov для основного блока ROW в котором содержатся COLUMN объекты которые необходимо поменять местами при отображении на мобильных устройствах:

2) Далее присвоим класс roditel-dla-vertikalnuh-slevo для левого элемента COLUMN:

 

3) После чего нам остаётся присвоить класс roditel-dla-vertikalnuh-pravo для правого элемента COLUMN:

Естественно не забудьте добавить стили которые указаны в начале статьи.

В итоге при просмотре сайта на ПК (от ширины экрана в 768 пикселей) наш родительский блок с двумя COLUMN будет отображаться так:

Но после применения (описанных в данной записи) стилей, COLUMN будут отображаться на мобильных устройствах по другой логике то есть вот так:

Меняем блоки местами при помощи jQuery:

В приведенном ниже коде, мы производим поиск в блоке div#roditel-dla-vertikalnuh-blokov дочернего элемента (ребенка) div#OO1_Pro_NAS и вставляем его за блоком div#OO3_Novunu. Фрагмент if ( $(window).width() <= 768) Указывает на то что данный скрипт будет исполняться на устройствах ширина экрана которых не превышает 768 пикселей.

Для того что бы не было видно как скрипт переставляет местами блоки прописываем стили:

После того как срипт поменяет местами блоки он отобразхит их при помощи строки кода $(“div#OO2_Afisha,div#OO3_Novunu,div#OO1_Pro_NAS”).animate({ ‘opacity’:’1′ }).fadeIn(‘slow’);.

King Composer + CSS – Меняем блоки местами для мобильных устройств
5 (100%)
Всего проголосовало: 1