Как изменить порядок отображения блоков только с помощью CSS?

Question

[Just Pixel]

Есть три блока: заголовок, изображение и текст анонса. В зависимости от разрешения их положение должно меняться из одного состояния в другое и обратно. Схема изменений представлена ниже:



Подскажите, пожалуйста, с помощью каких инструментов CSS можно перейти из одного состояния в другое? Состояние по-умолчанию может быть любым. Например по исходному коду по умолчанию состояние 1, а переход в состояние 2 вызывается изменением свойств CSS. Или наоборот.

Задача не сложная, если бы не ограничения: никакого JS кода, высота заголовка, анонса и изображения может быть любая, обязательна поддержка IE9+.

Может у кого есть какие идеи или я упустил что-то весьма очевидное? Заранее благодарен за помощь!

P.S. Если не затруднит, скиньте ответ в виде примера jsfiddle.net (без media query & etc, а просто пример состояния 1 и пример состояния 2 вызванный изменением свойств CSS с сохранением верстки из примера 1)

Answer 1

[Кирилл]

codepen.io/Kublyakov/pen/Egmrzm
блоку с классом title добавьте или удалите класс left

Comments

[Just Pixel]

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

Answer 2

[iBird Rose]

никакого JS кода, размеры заголовка, анонса и изображения могут любые, обязательна поддержка IE8+.

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

p.s. а вообще с помощью float'ов можно посидеть поразмыслить. но это муторно будет.

Comments

[Just Pixel]

В данный момент играюсь шириной, используя display: inline-block. Пока рано говорить что получится, но есть надежда =)

[iBird Rose]

Sergej Bopp: и кстати js тут в любом случае нужен будет. как ты собираешься переходить из одного состояния в другое? в любом случае хотя бы active повесить в класс - нужен будет js

[Just Pixel]

iBird Rose: CSS Media Query (ошибся в самом начале с требованиями - IE9+, а не 8...)

Answer 3

[Денис Инешин]

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

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

Comments

[Just Pixel]

Думал о них, но Flexbox не поддерживается в IE9, при этом в нем есть поддержка media query, то есть адаптивность в этом браузере должна быть. Так что в целом правильнее будет сказать, что поддержка перехода нужна для IE9+, сейчас исправлю.

Answer 4

[Nikita Shchypylov]

Первая же ссылка в гугле
g.zeos.in/?q=swap%20blocks%20css

Comments

[Just Pixel]

Первая ссылка в Google - Flexbox, однако это решение не подходит в связи с отсутствием поддержки у IE9/8.