Bootstrap grid aligning col that have different height

Question

I'm very new to bootstrap grid and I am trying to understand how it flows.

I have the following that is a side bar in my project:

When the screen size becomes smaller(xs) I want to get flow like this, when the sidebar gets pushed underneath the main content:

But instead bootstrap does this:

Finally, when widget 1, 2 and 3 are full squished together, they should stack like in the original.

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

You might need to use a responsive column reset via a clear fix: 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>

You can view this working here via JSFiddle: http://jsfiddle.net/6yb563m7

Note: All col's should to be wrapped inside a row for to conform to the proper bootstrap structure.

Answer 2

Just put your columns 1 2 & 3 in a <div class="row"> and your columns 4 & 5 in a separate <div class="row"> I've updated your fiddle https://jsfiddle.net/gm81fg3v/1/ and when you say finally 1 2 & 3 should stack...do you want them stacked on xs devices and then 4 & 5 below them side by side? If so then your colums 1 2 & 3 should have a class of col-md-12 col-sm-4 col-xs-12

Answer 3

You could try using the nth-child selector to clear the float after every third element.

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

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

Answer 4

或者，您可能希望使用 js 插件 isotope(masonry) 进行网格化。