Не так давно столкнулись с проблемой отображения изображения в мобильной версии в хаотичном порядке, первый блок — изображение под текстом, второй — над ним. Это было ожидаемо, если учесть факт шахматного расположения блоков на странице (слева изображение, справа текст и на оборот). И данная проблема для нас встала очень остро, особенно если учесть что 90% это мобильный трафик.
Конечно, владельцы сайтов на конструкторе могут данную проблему решить некоторыми манипуляциями с переключателями инверсии отображения на мобильных устройствах, но не во всех темах это есть, а если точнее, то в некоторых это есть. По этому проблему мы решили методом контрольных точек медиа запросов и параметров, которые будут применяться к блокам на основании данных точек.
Для реализации данного функционала нам потребовался блок родитель с одним классом, и два дочерних с изображением и текстом. Ко всем применяем разные классы и используем CSS FLEX
Как поменять местами блоки на странице сайта в мобильной версии
Поделитесь этой статьей
Оставить комментарий