С появлением мобильных устройств и адаптивной верстки часто стала возникать задача как поменять блоки местами CSS. Понятно как это сделать на JS, но на CSS задача не тривиальна.

Поменять блоки местами CSS

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

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

Есть решение как поменять блоки местами CSS

Решение очень простое, правда сработает не во всех браузерах, но технологии движуться вперед.
Для того, чтобы поменять блоки местами CSS нужно просто применить свойства CSS display: table-footer-group и display: table-header-group.

Рассмотрим на примере кода:


CONTENT 2
CONTENT 2

И CSS:

.container{
display: table;
}
.block1{
display: table-footer-group;
}
.block2{
display: table-header-group;
}

Всё! При выводе сначала выведеться блок 2, за ним блок 1.
Результат можно посмотреть на jsfiddle.net/8SMpY/, или в блоке ниже. В примере для наглядности добавлены 2 кнопки, которые на JS убирают и добавляют классы к div. Смена блоков местами происходит на чистом CSS.