Как сделать такую сетку?

Question

[Skaam]

Добрый день!

Возникла сложность в реализацией такой сетки (на первый взгляд вроде не сложно, но хоть убей не доходит):
3 составляющие - хедер, сайдбар, контент

1) на больших экранах 2 колонки
1ая - хеадер + контент (колонка резиновая, растягивается на всю ширину окна),
2ая - сайдбар (колонка фиксированной ширины)

2) на маленьких экранах 1 колонка (резиновая на всю ширину окна)
сайдбар при этом становится между хеадером и контентом т.е.:

хедер
+
caдбар
+
контент

вот пример на bootstrap
https://codepen.io/looktoroot/pen/wqNbgL
но тут сайдбар не фиксированной ширины, а нужно фиксированной
если сделать его в примере фиксированной ширины, то появляется ненужные отступы из за бутстраповских колонок.

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

Использование бутстрапа не обязательно.

Answer 1

[cssfish]

погуглите как сделать две колонки, толку побольше чем от бутстрапа будет.
чтоб не пугать отрицательными маржинами, вот calc вариант
https://jsfiddle.net/zx30Luey/

Comments

[ⓒⓢⓢ]

При float

блок выпадет из контекста потока

[Skaam]

cssfish, это мне подходит

JRK_DV, с выпадением при float можно бороться с помощью "clerfix", а при position: absolut уже никак