Помогите разобраться, как правильно зафиксировать (position:fixed) колонку в макете.
Есть у меня в макете 2 колонки, левая и правая. В левой части панель, которую хочу «прикрутить» так, чтобы при прокрутке страницы вверх и вниз, она была строго фиксированной и никуда не съезжала. При этом чтобы правая колонка, которая содержит в себе ленту записей, свободно могла прокручиваться.
Так же, хочется достигнуть максимальной адаптивности, чтобы на маленьком экране все это в виде плиток выстраивались друг-за дружкой (т.е. в одну колонку).

HTML код двух колонок:
<content>
	<div class="container">
        	<div class="row">
            		<div class="col-xs-12 col-lg-4 left">
			...
			</div>
			<div class="col-xs-12 col-lg-8 right">
			...
			</div>
		</div>
	</div>
</content>


CSS код для этих колонок:
.left{
    position:fixed;
    width:20%;   
}
.right{
    width:68%;
    float:right;
}

На большом экране красота, всё как надо. Но вот если начать сужать размеры окна браузера, то начинается страшная картина, всё ужимается не так как надо. Выглядит страшно. Особенно на самом минимуме, до которого можно свернуть окно браузера по горизонтали. И элементы страницы не выстраиваются в одну колонку друг-за-дружку, как это было до описания тех двух классов (right и left) на CSS.
А хочется максимального достижения своей цели и адаптивности. Не подскажете как реализовать всё это?