Проблема с позиционированием 2х блоков

Сначала был примерно вот такой код:

Код (Text):

1. <div class="content">
2.     <div class="content_div"></div>
3.     <div class="sidebar">
4.         <p></p>
5.         <p></p>
6.     </div>
7. </div>

с таким css:

Код (Text):

1. .content_div {
2.     margin-left: 220px;
3. }
4. .sidebar {
5.     float: left;
6.     width: 200px;
7. }

Все отображается нормально. Но тут для адаптивности шаблона под мобильники (на мобильниках планируется вывод сайдбара под контентом) потребовалось поменять местами content_div и sidebar. При этом sidebar съехал вниз под content_div. Поместил контент сайдбара в дополнительный блок и установил position: absolute:

Код (Text):

1. <div class="content">
2.     <div class="sidebar">
3.         <div class="sidebar_wrap">
4.             <p></p>
5.             <p></p>
6.         </div>
7.     </div>
8.     <div class="content_div"></div>
9. </div>

Код (Text):

1. .content {position: relative;}
2. .content_div {
3.     margin-left: 220px;
4. }
5. .sidebar {
6.     float: left;
7.     width: 200px;
8.     position: absolute;
9.     top: 0;
10.     left: 0;
11. }

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

Как можно решить эту проблему без использования js, чисто через css? Или может есть какие другие способы разместить сайдбар под контентом так, чтобы осталась предыдущая верстка?

Заранее спасибо за ответы.

 

Про @media я в курсе. Проблема была с позиционированием блоков. Уже решил.