Бутстреп-сетка, выравнивающая столбцы, которые имеют разную высоту

Question

Я очень новичок в бутстрап-сетке, и я пытаюсь понять, как она течет.

У меня есть следующее, что является боковой панели в моем проекте:

Когда размер экрана становится меньше (хз) Я хочу, чтобы получить поток, как это, когда боковая панель получает толкнул под Основное содержание:

Но вместо начальной загрузки делает это:

Наконец, когда виджеты 1, 2 и 3 полностью сплющены вместе, они должны складываться, как в оригинале.

Fiddle: https://jsfiddle.net/gm81fg3v/

<div class="container"> 
    <div id="first_row" class="col-md-12"> 
     <div id="widget1"class="sibebar_widget col-md-12 col-xs-4">1</div> 
     <div id="widget2" class="sibebar_widget col-md-12 col-xs-4">2</div> 
     <div id="widget3" class="sibebar_widget col-md-12 col-xs-4">3</div> 
     <div id="widget4" class="sibebar_widget col-md-12 col-xs-4">4</div> 
     <div id="widget5"class="sibebar_widget col-md-12 col-xs-4">5</div> 
    </div> 
</div> 

.container{border: 1px solid black;} 
#content{border: 1px solid green;} 
.sibebar_widget{border: 1px solid blue;} 
#widget1{height: 20px;} 
#widget2{height: 40px;} 
#widget3{height: 30px;} 

Answer 1

Просто поместите ваши колонки 1 2 & 3 в <div class="row"> и ваши столбцы 4 & 5 в отдельном <div class="row"> Я обновил свой скрипку https://jsfiddle.net/gm81fg3v/1/ и когда вы говорите, наконец, 1 2 & 3 должен складываться ... вы хотите, чтобы они укладывались на устройства xs, а затем 4 & 5 под ними бок о бок? Если да, то ваши colums 1 2 & 3 должны иметь класс Col-мд-12 цв-СМ-4 Col-хз-12

Answer 2

Вам может понадобиться использовать адаптивный сброс колонки с помощью четкого исправления: http://getbootstrap.com/css/#grid-responsive-resets

<div class="container"> 
    <div id="first_row" class="col-md-12"> 
     <div id="widget1"class="sibebar_widget col-md-12 col-xs-4">1</div> 
     <div id="widget2" class="sibebar_widget col-md-12 col-xs-4">2</div> 
     <div id="widget3" class="sibebar_widget col-md-12 col-xs-4">3</div> 
     <div class="clearfix visible-xs-block"></div> 
     <div id="widget4" class="sibebar_widget col-md-12 col-xs-4">4</div> 
     <div id="widget5"class="sibebar_widget col-md-12 col-xs-4">5</div> 
    </div> 
</div> 

Вы можете просмотреть это рабочее здесь через JSFiddle: http://jsfiddle.net/6yb563m7

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

Answer 3

Вы можете попробовать использовать селектор nth-child, чтобы очистить поплавок после каждого третьего элемента.

.sibebar_widget:nth-child(3n+4){ 
    clear:both; 
}  

https://jsfiddle.net/gm81fg3v/2/

Answer 4

я вместо этого использовали JS плагин изотоп (кладка) для griding. Бутстрап довольно запутан.