Как проще сверстать такой адаптивный блок?

Question

[DTX]

Думал на тему флекса, но ничего хорошего не придумал.
Ширина центра не известна (интересует pureCSS решение без медиа-запросов).

Answer 1

[Андрей Федоров]

codepen.io/aliencash/pen/vKQqqP

Comments

[DTX]

С медиа-запросами всё просто. Интересует решение без них. Тем более, ширина элементов может быть не фиксированной. Js просьба не предлагать)

[Андрей Федоров]

DTX: А что смущает в медиазапросах?

[Андрей Федоров]

DTX: Если бы элементы не были фиксированными картинка была бы другой. codepen.io/aliencash/pen/vKQqqP

[DTX]

Андрей Федоров: Если можно обойтись без них, то лучше так и делать, чтобы css не плодить. Но вопрос задан скорее для понимания, нежели для реального проекта.

[Андрей Федоров]

DTX: Тогда считаю, что я ответил. Используйте order.

[DTX]

Андрей Федоров:
>Если бы элементы не были фиксированными картинка была бы другой.

Не понял.

Вот, допустим .left 10%, .width 20%, .center - fix. На калькуляторе высчитывать границы предлагаешь?)
codepen.io/anon/pen/pbQrjP

[DTX]

Андрей Федоров: да, на первоначальный вопрос ответил, но я добавил уточнение)
Пока ждём решения без медиазапросов, а там уж решением отвечу и твой ответ. Спс

[Андрей Федоров]

DTX: Тогда определите по каким критериям переносить центр вниз. Вы убрали min-width у элементов, а именно это было критерием.