Как сверстать сайдбар, чтобы он был после контента на мобиле, даже если в контенте есть блоки во всю ширину?

Question

[Идель Гизатуллин]

Ожидаемое:


Кодпен, на котором пытался разобрать ситуацию: https://codepen.io/edele/pen/weQpMq
Там получилось только перед полноширинником на мобиле поставить сайдбар, а нужно после.

Comments

[Froggyweb]

иллюстрация классная твоя? без сарказма. прикольно.

[Идель Гизатуллин]

Froggyweb: пальцем в телефоне рисовал, пока друзьям задачу объяснял.

Answer 1

[Alexander Pushkarev]

Flexbox и свойство order

Comments

[Идель Гизатуллин]

Это работает немного для другого кейса, когда все блоки в одном общем контейнере, а мне нужно обернуть сайдбар и контент в блок с ограниченной шириной.

Вот тут работает флекс ордер: https://codepen.io/anon/pen/vZQWXw

В моём кейсе флекс ордер не сработает: https://codepen.io/edele/pen/weQpMq

Answer 2

[Вадим Кот]

В таком варианте, когда sidebar находится в контейнере не получится вывести его после. Только если выводить sidebar дважды и прятать один из них, а в медиазапросе менять их видимость.

Comments

[Идель Гизатуллин]

Ага, ещё можно позишен абсолютом сверстать сайдбар, посчитав, что сайдбар никогда не станет больше контента. Или сделать джаваскриптом. Выбираю сейчас между этими хаками, но не теряю надежды на лучшее.