Поменять div местами css

Как поменять местами блоки div в мобильной версии сайта

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

Смотрите сами. Как работала мобильная версия? Сайт определял, что его открывают в мобильном браузере, и вместо обычной, выводил мобильную версию.

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

Скажу только, что если вопросы разработки web-ресурсов вызывают у вас сложности, а сайт нужен не «когда-нибудь», а в приемлемые сроки, то выгоднее обратиться к специалистам и заказать. Где угодно. Потому, что каждый должен заниматься своим делом. Веб-мастер — делать сайты. Предприниматель — деньги.

Адаптивная верстка

Адаптивной верстке глубоко плевать на чем запускается сайт. Он просто приспособится под ширину экрана от, допустим, 480px в ширину до 2400px и выше. Т.е., что мобила, что широченный телевизор, сайту все-едино. Прелесть, правда?)

Чтобы не мучиться и не изобретать свой велосипед, кое-кто придумал Bootstrap. Это готовый набор js и css файлов. При том, Bootstrap позволяет делать с сайтом много чего интересного, и сам по себе заслуживает не просто отдельного поста, а целой серии. Я сам знаю о нем всего-ничего, но даже этого хватило, чтобы оценить возможности и удобство.

Перемещение блоков

А теперь о главном. Сейчас как раз верстаю очередной сайт. В его шапке четыре блока идущие друг за другом. Ну вот так, как на рисунке.

Проблема в том, что на узких экранах они выстраиваются вот так.

Мне же нужно, чтобы вот так.

Конечно это можно сделать несколькими способами без всякого Bootstrap’а. Но во-первых, в данном проекте я его УЖЕ использую. Точнее, только сетку от него, но и этого будет достаточно. Во-вторых, давайте кратенько эти способы перечислю.

Способ 1: float (css)

Способ вполне годный, когда надо передвинуть поменять местами пару колонок. В моем случае двигаются сразу три колонки, в т.ч. по вертикале. Неудобно!

Способ 2: flex (css)

Слишком много возни. Да и деформирует блоки так, как мне не нужно.

Способ 3: jQuery (Java Script)

На самом деле это сразу несколько способов. Отлавливаем разрешение экрана и в зависимости от нее скрипт будет перемещать блоки. Но это долго и это костыли. Что если таких передвигаемых блоков окажется штук 50 по всей странице? Под каждый писать отдельный код? Я уже молчу как это скажется на быстродействии сайта.

Способ 4: Bootstrap

А теперь Bootstrap. Все предельно просто. Имеем html-код.

Если разделить шапку на 12 частей, то на экране over 1200px, в моем проекте, первый div занимает 2/12, второй 5/12, третий 3/12, четвертый 2/12. На экранах менее 700+px каждый блок занимает целую строку (12/12).

Для примера возьму всего два размерных класса сетки Bootstrap: .col-lg-* (широкий экран от 1170px) и col-sm-* (узкий экран 750px и меньше).

Вот так выглядит код после присвоения указанных классов.

Видите? Размер блоков для разных экранов, согласно сетке (из 12 ячеек), выражен цифрой в классе.

Оптимизируем html-код под узкий экран. Т.е. просто изменим порядок блоков под мобильный экран, а двигать будем на уже крупном. Так легче.

На мобиле все выстроилось как требовалось. Зато на обычном мониторе порядок изменился, чего нам изначально не нужно.

Добавим классы, которые поменяют местами блоки для широкоэкранной версии сайта так, чтобы они шли в изначальном порядке (1, 2, 3, 4), а в мобильной остались соответственно разметке (2, 3, 1, 4).

col-lg-pull-* перемещает блок влево.
col-lg-push-* перемещает блок вправо.

Всё. Теперь на мониторе колонки строятся так, как и требовалось изначально.

Забавный факт

Здесь есть одна странность, которую не совсем понял. Цифра в классе col-lg-push-* указывает на какое количество ячеек нужно сдвинуть правый край блока вправо. Так блок с цифрой 2 был сдвинут на 2 ячейки. То же самое произошло с блоком с цифрой 3.

В итоге, в начале сетки освободилось 2 ячейки под блок с цифрой 1. НО, чтобы туда добраться нужно преодолеть влево 8 ячеек, а блоку хватило 7.
Из этого (проведя несколько экспериментов) делаю вывод, что цифра в классе col-*-pull-* указывает сдвиг блока влево на указанное число ячеек минус 1. В моем случае 7 (8-1).

О том, как подключить сетку Bootstrap к сайту, в рамках этого поста, освещать не стану. Инфы на данную тему в интернете и так полно. И все же, возможно, в будущем сделаю под это дело отдельный пост.

Однако, вы уже видите, насколько Bootstrap удобен. Всего-то и делов, что присвоить блокам нужные классы.

На этом пока всё. Не забывайте подписываться на обновления блога и делиться ссылкой на этот пост с друзьями в соцсетях. Спасибо, что читаете.

Источник

Как поменять блоки местами в CSS?

В сегодняшней статье вы узнаете, как можно менять блоки на сайте местами, при этом не внося никаких правок в HTML или PHP код. Для реализации данной задачи мы будем использовать всего несколько CSS-свойств.

Навигация по статье:

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

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

Итак, давайте рассмотрим конкретный пример. Предположим у нас есть вот такая страница сайта:

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

Прежде чем приписывать какие-либо CSS-свойства для блоков, нам нужно вычислить класс или идентификатор, который они имеют.

1. Кликаем правой кнопкой по элементу, выбираем «Исследовать элемент» и далее инспектируем его код, что бы видеть какой класс или идентификатор присваивается этому элементу.

В данном случае наш элемент имеет два класса, класс content и класс fleft. Скорее всего, класс content имеет не только этот блок, но еще другие блоки на сайте. Поэтому я буду привязываться к классу fleft, потому, как он выглядит более уникалным.

По инспектированию кода и определению классов и идентификаторов элементов на сайте я делала отдельную статью, с которой вы можете ознакомиться по этой ссылке.

Мы видим код этого блока, и видим, что у него есть класс fright. Копируем его, и для него приписываем наоборот, обтекание по левому краю.

Вот так мы при помощи буквально нескольких строчек кода, очень быстро поменяли их местами.

Изменяем порядок отображения блоков

Теперь давайте рассмотрим еще один пример. Предположим у нас есть страница с вот такой структурой блоков:

Если мы захотим поменять местами блок с текстом и блок с изображением, нам достаточно будет использовать свойство float и задать ему значение left или right. Однако если мы будем адаптировать эту страницу под мобильные устройства, то увидим, что на маленьких экранах, после перестроения в одну колонку, у нас эти блоки выглядят не очень красиво.

У нас идет в первом блоке сначала изображение, а потом текст, во втором сначала текст, а потом изображение, в третьем опять наоборот. Было бы на много красивее и аккуратнее, если бы у нас и после перестроения все блоки выглядели одинаково.

Например, чтобы во всех блоках сначала была бы задана картинка, а затем текст.

При помощи CSS-свойства float мы уже ни как не можем повлиять здесь на порядок расположения элементов. Однако у нас есть еще одно CSS-свойство display:flex, которое поможет нам реализовать данную задачу.

CSS cвойство display:flex предназначено для гибкой компоновки дочерних элементов. Оно имеет много интересных возможностей, и очень активно используется в современной верстке. В ближайшее время я сделаю отдельную статью или видео, посвященное интересным возможностям и нюансам использования этого свойства.

Если в предыдущем примере мы задавали или изменяли CSS-свойство float конкретно для тех элементов, которые мы хотим поменять местами. То здесь нам нужно будет еще обращать внимание на родительские блоки этих элементов.

Предположим у нас есть блок, который имеет класс text-row, внутри этого блока находится еще два блока, это блок с изображением, и блок с текстом. Блок с изображением имеет класс image-block, а блок с текстом имеет класс description-block.

Наша задача задать для родительского блока тех элементов, которые мы хотим переставить местами, CSS-свойство display:flex и свойство flex-flow. В нашем случае это будет выглядеть вот таким образом:

Источник

Как поменять местами блоки в CSS (горизонтальные и вертикальные)

Поговорим о том, как поменять местами горизонтальные и вертикальные блоки в CSS.

Очень часто макет странички содержит сайдбар справа и основное содержимое слева. Однако для раскрутки лучше, чтобы заголовки и значимая информация шли как можно раньше в коде. Из-за этого возникает необходимость визуального изменения последовательности элементов.

Поменять местами две колонки совсем несложно, для этого нужно отправляемой направо первой колонке добавить в CSS ‘float: right’, а если сайт сверстан на Bootstrap, то ей достаточно добавить класс «pull-right». Простенький примерчик.

Но как же быть, если необходима вертикальная перестановка блоков?

На самом деле даже для такой цели есть почти кроссбраузерный способ. А поможет в этом табличное представление блоков.
Блоку, обрамляющему всю конструкцию, нужно добавить «display: table», а внутренним блокам следующие «табличные» свойства:

• display: table-header-group – блоку, который должен быть выше всех;
• display: table-row-group – блоку, который будет идти посередине;
• display: table-footer-group – самому нижнему блоку.

Стоит отметить, что у внутренних блоков не будет работать margin, поэтому если нужно сделать отступ, до к родительскому блоку добавляется border-spacing (см. пример.)

Таким образом блоки будут переставлены вертикально, это бывает полезно, например, для отображения фильтров, навигации и т.д. наверху. Этот способ поддерживают практически все современные браузеры. Если необходима поддержка устаревших IE 6, 7 и 8, нужно добавлять javascript для перестановки блоков — эти версии браузера не понимают свойство «display: table».

Источник