Как сверстать такие позиционирование блоков для адаптива?

[MiHALbI4]

Всем привет!

Интересует следующий вопрос по адаптивной верстке. Есть 3 блока. На широком экране красный и черный - фиксированные по ширине, а белый - основной блок для контента, у которого ширина зависит от ширины страницы, т.е. резиновый. Высота у блоков может быть любой. Главное - чтобы блоки не дублировались!

 

При узком экране красный должен переместиться над белым блоком, а черный - под ним:

 

Я пытался сделать через float, но моих знаний не хватило на решение данной задачи. Заранее спасибо!)

[Schamil74]

Привет!

Я тоже не особый спец в блочной модели. Но это то, что мне пришло сразу в голову.

Можно сделать так, но помни, что на узком экране один из блоков сайдбара на узком экране имеет абсолютное позиционирование.