Html поменять порядок блоков

Как поменять местами блоки 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

Автор: Марат Таналин Опубликовано: 2011-06-05 Обновлено: 2017-06-28 Краткое описание Кросс­браузерный способ полно­ценной вертикальной пере­становки блоков произвольной высоты средствами CSS.

Современные браузеры — Flexbox

Произвольный порядок

В современных браузерах (в том числе Internet Explorer 11 и Edge) управлять визуальным порядком элементов можно с помощью CSS-свойства order , являющегося частью механизма Flexbox . Блоки следуют в порядке возрастания значений свойства order . Значением свойства order должно быть целое число, которое может быть как положительным, так и отрицательным. Значение по умолчанию — 0 .

.example > .a /* Отобразится третьим */
.example > .b /* Отобразится вторым */
.example > .c /* Отобразится первым */

Объявление display: flex включает Flexbox для элемента-контейнера. Объявление flex-direction: column задаёт вывод дочерних элементов контейнера друг под другом вместо горизонтального вывода, используемого во Flexbox по умолчанию.

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

Обратный порядок

Если требуется просто вывести элементы в обратном порядке, можно использовать объявление flex-direction: column-reverse для содержащего их контейнера без необходимости явно задавать расположение каждого элемента:

.example display: flex;
flex-direction: column-reverse;
>

Устаревшие браузеры — display: table

В браузерах, не поддерживающих Flexbox (IE 10 и ниже), вертикальный порядок следования блоков на HTML-странице можно изменить, придав им табличное представление при помощи CSS-свойств семейства display: table . Вне зависимости от порядка расположения блоков в HTML-коде, «шапка» ( display: table-header-group ) такой таблицы отображается в её верхней части, «подвал» ( table-footer-group ) — в нижней, а основная часть таблицы ( table-row-group ) — между ними.

.example display: table;
width: 100%;
>

.example > .a /* Отобразится внизу псевдотаблицы */
.example > .b /* Отобразится посередине */
.example > .c /* Отобразится вверху */

Описанным образом можно изменять порядок до трёх соседних блоков. Дополнительно можно задействовать display: table-caption (отображение блока в роли подписи к таблице) в сочетании с CSS-свойством caption-side со значением top или bottom .

Метод работает в большинстве распространённых браузеров, в том числе в Internet Explorer начиная с версии 9 (IE8 — с оговорками, см. далее).

Internet Explorer 6, 7 и 8 — DOM

Устаревшие браузеры IE6 и IE7 не поддерживают CSS-свойства семейства display: table* .

Кроме того, в IE8 в некоторых случаях наблюдается динамическая ошибка рендеринга: если перемещаемый блок содержит в себе псевдотабличные элементы ( display: table* ) (проявление нюанса замечено только в этом случае), возможно спонтанное пропадание некорых ячеек (всегда разных и в разном количестве) псевдотаблицы при первичной отрисовке страницы.

Поэтому для IE8 и ниже можно отменить CSS-правила, придающие блокам табличный вид, и дополнительно переместить блоки в нужные позиции DOM-дерева HTML-документа уже с помощью JavaScript:

/**
* Перестраивает соседние элементы в DOM-дереве в заданном порядке.
* @param elems Соседние элементы в необходимом порядке.
*/
function reorderElements(elems) // http://tanalin.com/articles/css-block-order/
var count = elems.length;

var parent = elems[0].parentNode;

for (var i = count — 1; i >= 0; i—) parent.insertBefore(elems[i], parent.firstChild);
>
>

Определение возможностей браузера

Использовать разные стили для современных и устаревших браузеров можно путём определения возможностей браузера средствами JavaScript.

Определить, поддерживает ли браузер Flexbox, можно путём проверки существования свойства order объекта, доступного через свойство style корневого элемента документа ( ) — document.documentElement .

Версию Internet Explorer можно определить путём проверки существования нестандартного объекта document.all , доступного только в IE 10 и ниже, в сочетании с существованием или отсутствием одного из стандартных объектов.

if (‘order’ in document.documentElement.style) // Flexbox-совместимый браузер.
// Используем `order` или `flex-direction: column-reverse`.
>
else if (document.all && !document.addEventListener) // IE8 или ниже.
// Изменяем реальный порядок блоков в DOM-дереве средствами JS.
>
else // Браузер без поддержки Flexbox, в том числе IE 9/10.
// Используем `display: table`.
>

Перепечатка любых материалов сайта в любом объёме запрещена

Источник