Как сверстать блоки?

Question

[Onatsky]

Помогите сверстать все так, чтобы при изменении основного блока (черный), если не помещаются красный и синий блок, то блок который левее уходит вниз, а блок который правее вверх. Вот примерная схема чего хочу добиться:
P.S. Красный и синий блоки не имеют фиксированной ширины, она может быть любой, в зависимости от однострочного контента. Ну и следовательно media запросы не подойдут.

Заранее спасибо! ^_^

Answer 1

[Ankhena]

На маленьких экранах
1. display:flex черному
order: 10 красному

2. Менять flex-direction

3. Менять float с right на left.

Ширину при которой менять придется высчитывать с помощью JS

Comments

[Владимир]

frontender.info/a-guide-to-flexbox

[Onatsky]

Спасибо!

Answer 2

[WQP]

codepen.io/Glaswr/pen/eBVvrd

К этому надо обсчёт ширины добавить на js и потом уже для article ставить соответствующий order

Comments

[Владимир]

У флекса поддержка в браузерах больше чем у бордер радиус, зачем использовать что то еще?