Никаких флоатов не нужно, не начинайте косячить в самом начале, есть такой класс .col-md-offset-2
он сдвигает ваш блок на 2 секции, при условии если вы уберете секции .col-md-2
, так же посмотрите свойства .col-md-push-2
и .col-md-pull-2
эти классы позволяют двигать блоки (менять местами) это альтернатива флоатов
Попробуйте так 1 вариант:
<div class="container">
<div class="row">
<div class="first col-xs-8 col-xs-offset-2">Колонка 1 с использованием .col-xs-offset-2</div>
</div>
<div class="row">
<div class="second col-xs-12">Колонка 2</div>
</div>
</div>
вариант 2:
<div class="container">
<div class="row">
<div class="sidebar col-xs-2">Sidebar Right</div>
<div class="first col-xs-8">Колонка 1 с использованием .col-xs-offset-2</div>
<div class="sidebar col-xs-2">Sidebar Right</div>
</div>
<div class="row">
<div class="second col-xs-12">Колонка 2</div>
</div>
</div>
Что касается pull
и push
. На extra small устройствах (с разрешение до 768px): 1 блок находится над вторым col-xs-12
, на устройствах с разрешением больше или равно 768px, блоки меняют свой размер и делятся пополам col-sm-6
, первый блок уходит вправо col-sm-push-6
, а второй - влево col-sm-pull-6
.
<div class="container">
<div class="row">
<div class="first col-xs-12 col-sm-6 col-sm-push-6">Колонка 1 отправляем ее вправо на 6 секции .col-sm-push-6</div>
<div class="second col-xs-12 col-sm-6 col-sm-pull-6">Колонка 2 отправляем ее влево на 6 секций .col-sm-pull-6</div>
</div>
</div>
Все примеры
<div><div class="col-md-2 column"> </div><div class="col-md-8 column">колонка 1 </div><div class="col-md-2 column"> </div></div> <div><div class="col-md-12 column">колонка 2</div></div>
вы имеете ввиду так? не помогает, нижний div все так же от начала более раннего родительского.