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

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

Доброго времени суток!

Помогите решить одну задачу:

Есть таблица построенная из блоков Div

 
 
Название 1
 
Название 2
 // Тут названия колонок 
Название 3
 
 
Содержимое 1.1
 
Содержимое 1.2
 // Тут содержимое первой строки 
Содержимое 1.3
 
 
Содержимое 2.1
 
Содержимое 2.2
 // Тут содержимое второй строки 
Содержимое 2.3
 
 . 
Содержимое 99.1
 
Содержимое 99.2
 // Тут содержимое 99 строки 
Содержимое 99.3
 
 

Вопрос с помощью CSS возможно ли поменять местами строки к примеру что бы за место строки 1 была строка 67 а за ней 68 далее к примеру строка 1 и дальше всё по порядку что бы было?

«Я не волшебник, я только учусь»

Способы смены порядка вывода элементов с помощью CSS

В этой статье мы рассмотрим несколько различных методов CSS для переупорядочения вывода элементов HTML.

Цель

Наша раскладка очень простая. В частности, на маленьких экранах (меньше 600px) она будет выглядеть так:

На средних экранах и больше (от 600px) кнопки будут выстраиваться в ряд:

Наша главная задача — поменять порядок кнопок на обратный.

Разметка

Разметка будет самая простая: просто элемент div , содержащий четыре кнопки:

 
Button 1 Button 2 Button 3 Button 4 
 

Стили

На маленьком экране у всех кнопок будут одинаковые стили:

.boxes button < display: block; width: 100%; padding: 15px; border: none; margin-bottom: 5px; box-sizing: border-box; font-size: 1rem; text-align: center; text-decoration: none; background: gold; color: #000; >.boxes button:nth-of-type(even)

На больших экранах мы зададим width: 25% , остальные стили будут определяться методом CSS, который мы будем применять для задания обратного порядка кнопок.

@media screen and (min-width: 600px) < /* we skip this property in flexbox and grid methods */ width: 25%; /* more stuff here */ >

Наконец, у нас будут стили для состояния focus наших кнопок:

.boxes button:focus

Таким образом, если мы будем использовать для навигации клавишу Tab, наши кнопки при фокусировке станут темно-красными.

Методы упорядочивания колонок

Теперь мы готовы проверить различные подходы CSS для вывода кнопок в реверсивном порядке при превышении областью видимости ширины в 599px.

Метод №1: плавающие блоки

Можно просто добавить блокам float: right , вот полные стили:

@media screen and (min-width: 600px) < .boxes button < float: right; width: 25%; >> 

И демо с Codepen:

Метод №2: позиционирование

Альтернативным вариантом будет задание позиции элементам, относительной или абсолютной.

По первому варианту (с относительным позиционированием) мы зададим кнопкам, плывущим влево свойство position: relative и затем расставим их с помощью свойство left .

@media screen and (min-width: 600px) < .boxes button < position: relative; float: left; width: 25%; >.boxes button:nth-of-type(1) < left: 75%; >.boxes button:nth-of-type(2) < left: 25%; >.boxes button:nth-of-type(3) < left: -25%; >.boxes button:nth-of-type(4) < left: -75%; >> 

Вторым вариантом (с использованием абсолютного позиционирования) мы зададим нашим кнопкам position: absolute , а с помощью свойства left разместим их более точно.

@media screen and (min-width: 600px) < .boxes < position: relative; >.boxes button < position: absolute; width: 25%; >.boxes button:nth-of-type(1) < left: 75%; >.boxes button:nth-of-type(2) < left: 50%; >.boxes button:nth-of-type(3) < left: 25%; >.boxes button:nth-of-type(4) < left: 0; >> 

Демо на Codepen:

Метод №3: свойство direction

Менее очевиден подход на основе свойства direction — оно предназначено для смены направления чтения текста. В нашем случае мы задаем direction: rtl (справа налево) для элемента-обертки, что позволит сменить направление раскладки.

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

Вы можете видеть необходимые стили CSS ниже:

@media screen and (min-width: 600px) < .boxes < display: table; width: 100%; direction: rtl; >.boxes button < display: table-cell; width: 25%; >> 

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

.boxes button

Демо на Codepen:

Метод №4: трансформация

Изящным решением будет оставить кнопкам float: left; и затем применить transform: scaleX(-1) к ним и их родителю. Задав отрицательные значения мы сделаем так, что трансформируемый элемент не масштабируется, а переворачивается по горизонтальной оси.

@media screen and (min-width: 600px) < .boxes < transform: scaleX(-1); >.boxes button < float: left; transform: scaleX(-1); width: 25%; >> 

Демо на Codepen:

Мы также можем использовать для создания нужного порядка функцию трансформации rotate . Все, что нам надо добавить кнопкам и их родителю свойство transform: rotateY(180deg) .

CSS для этого решения:

@media screen and (min-width: 600px) < .boxes < transform: rotateY(180deg); >.boxes button < float: left; transform: rotateY(180deg); width: 25%; >> 

Демо на Codepen:

Метод №5: флексбокс

Флексбокс это еще один способ изменения порядка колонок. В нашем примере мы используем два разных свойства флексбокса для создания нашей раскладки.

Первый подход это сделать родительский элемент кнопок флекс-контейнером и затем добавить flex-direction: row-reverse , вот так:

@media screen and (min-width: 600px) < .boxes < display: flex; flex-direction: row-reverse; >> 

Демо на Codepen:

Второй вариант с флексбоксом состоит в использовании свойства order для определения порядка, в котором кнопки должны выводиться.

@media screen and (min-width: 600px) < .boxes < display: flex; >.boxes button:nth-of-type(1) < order: 4; >.boxes button:nth-of-type(2) < order: 3; >.boxes button:nth-of-type(3) < order: 2; >.boxes button:nth-of-type(4) < order: 1; >> 

Демо на Codepen:

Метод №6: грид-раскладка

Многообещающим решением для расстановки элементов является раскладка на основе CSS Grid. Несмотря на крайне ограниченную поддержку в браузерах на момент написания статьи ее стоит попробовать. Учитывайте, что наш пример будет работать только в Chrome (по умолчанию эта возможность отключена, но ее легко активировать).

Не погружаясь глубоко в детали я опишу два способа с использованием CSS Grid.

Первый вариант это задание родительскому элементу кнопок свойства display: grid; и использование свойства grid-column для определения порядка вывода кнопок. В дополнение мы обеспечим попадание всех кнопок в один ряд путем прямого указания этого — grid-row: 1 .

@media screen and (min-width: 600px) < .boxes < display: grid; grid-template-columns: repeat(4, 1fr); >.boxes button < grid-row: 1; >.boxes button:nth-of-type(1) < grid-column: 4; >.boxes button:nth-of-type(2) < grid-column: 3; >.boxes button:nth-of-type(3) < grid-column: 2; >.boxes button:nth-of-type(4) < grid-column: 1; >> 

Демо на Codepen:

Второй вариант использования CSS Grid похож на второй способ использования флексбокса. Мы зададим контейнеру свойство display: grid; , а затем используем свойство order для определения порядка вывода кнопок.

@media screen and (min-width: 600px) < .boxes < display: grid; grid-template-columns: repeat(4, 1fr); >.boxes button:nth-of-type(1) < order: 4; >.boxes button:nth-of-type(2) < order: 3; >.boxes button:nth-of-type(3) < order: 2; >.boxes button:nth-of-type(4) < order: 1; >> 

Демо на Codepen:

Напомню, что для тестирования этого метода, вам надо активировать “Experimental Web Platform features” в Chrome.

Порядок исходников и визуальный порядок

Как было показано, мы можем использовать различные подходы CSS для смены порядка наших кнопок. Попробуем пройтись по нашим демо, используя клавиатуру (кликните на пен и нажмите клавишу Tab) для навигации по кнопкам. Вы заметите, что даже, если кнопка с номером 4 выведена первой, фокус сначала появляется на кнопке с номером 1, так как она расположена первой в DOM. То же случится, если мы протестируем наши демо со скринридером (я проводил тесты с NVDA).

Учитывая эту независимость порядка CSS от порядка DOM, нам надо быть крайне осторожными с частями страниц, порядок которых мы изменяем с помощью CSS. Например, свойство флексбокса order это один из наиболее гибких способов для переупорядочения элементов, согласно спецификации:

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

То же самое спецификация говорит о свойстве order CSS Grid.

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

Примечание: если вы используете второй способ с флексбоксом в Firefox, то вы заметите, что навигация с клавиатуры работает отлично и фокус на средних экранах появляется сначала на кнопке №4. Такое поведение является багом.

Заключение

В этой статье мы проверили различные методы CSS для переупорядочивания элементов HTML. Конечно, не все из этих методов универсальны и перед тем, как выбрать нужный вам, вы должны учесть несколько вещей:

• Браузеры, которые вам надо поддерживать. Некоторые из перечисленных подходов не работают в старых версиях Internet Explorer (т.е. < 10).
• Степень сложности перестановки — это может быть что-то простое, как наш пример или что-то более сложное.

Дополнительные материалы

• HTML Source Order vs CSS Display Order от Adrian Roselli
• Flexbox & the keyboard navigation disconnect от Léonie Watson

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

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

Итак, как поменять блоки местами на css без правки html и php или если называть все своими именами, то как переопределить порядок отображения элементов?

Сразу перейдем к делу, а воду будем лить потом!

Для того что бы определять порядок, используемый для размещения flex элементов в их flex контейнере, в CSS существует свойство order , вот собственно и все что вам надо!

Все же на всякий случай перейдем к практике и рассмотрим примеры которые собственно могут вам пригодится.

Пример использования свойства order в flexbox верстке

Предположим в нашем контейнере body есть два дочерних контейнера:

• Контейнер main с основным содержанием сайта.
• Контейнер aside т.е сайдбар нашего сайта с различными виджетами т.е меню, фильтры и.т.д.

Люди мы современные и естественно предполагаем, что верстаем применяя CSS3, а значит, как изначально сказано используем flexbox, т. е нашему тегу body мы задаем свойство display: flex , что делает все дочерние элементы flex элементами, выстроенными в ряд (по умолчанию flex-direction: row )

body

Теперь когда наши дочерние контейнеры стали flex элементами внутри flex контейнера мы можем задавать им свойство order , первым будет выводиться тот элемент у которого числовое значение меньше т. е, что бы поменять наши элементы местами нам нужно задать для main свойство order со значением 2, а для aside свойство order со значением 1 собственно вот и вся наука.

body main aside

Пример использования flex-direction: row-reverse

Также если мы предположим, что в нашем flex контейнере исключительно только 2 элемента и только их нужно поменять между собой местами, то мы можем не определять порядок элементов, а просто задать flex контейнер со свойством flex-direction (расположение flex элементов по главной оси и направлению) не по умолчанию, а явно со значением, что ряд нужно развернуть т. е row-reverse соответственно получим аналогичный результат.

body

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