З появою мобільних пристроїв і адаптивної верстки часто стала виникати задача як поміняти блоки місцями CSS. Зрозуміло як це зробити на JS, але на CSS завдання не тривіальна.
Взагалі завдань, в яких потрібно поміняти блоки місцями CSS може бути багато:
- поміняти порядок виведення колонок, при адаптації під мобільні пристрої
- поміняти блоки місцями для того, щоб не важлива для користувачів, але важлива для пошукових роботів, інформація виводилася нижче, важливою для користувачів, при цьому щоб в HTML важлива для роботів була вище
- просто поекспериментувати, врешті-решт
Є рішення як поміняти блоки місцями CSS
Рішення дуже просте, правда спрацює не у всіх браузерах, але технології движуться вперед.
Для того, щоб поміняти блоки місцями CSS потрібно просто застосувати властивості CSS display: table-footer-group і display: table-header-group.
Розглянемо на прикладі коду:
Усе! При виведенні спочатку виведе блок 2, за ним блок 1.
Результат можна подивитися на jsfiddle.net/8SMpY/. або в блоці нижче. У прикладі для наочності додані 2 кнопки, які на JS прибирають і додають класи до div. Зміна блоків місцями відбувається на чистому CSS.
- Захист від SQL ін'єкцій на PHP
- 301 редирект php
- Поворот тексту CSS. просто
