javascript - Bootstrap Columns not stacking right? -

On my page I have several different blocks / portlets, and I fit them well in stack and white space. In the following example, block 4 should be under Block 1, and even in (below 2 blocks), should not it fit in white space, with no difference? This is a good example of Pinterest (or my width may vary). Or can we do this without adding plugins (I already have a sort of work)? Thanks in advance for any help.

  & lt; Div class = "container-fluid" & gt; & Lt; Div class = "col-lg-4" style = "height: 200px; range: 1px #ccc solid" & gt; & Lt; H1 & gt; Block 1 & lt; / H1> & Lt; / Div & gt; & Lt; Div class = "col-lg-4" style = "height: 100px; range: 1px # ff0 solid" & gt; & Lt; H1 & gt; Block 2 & lt; / H1> & Lt; / Div & gt; & Lt; Div class = "col-lg-4" style = "height: 150px; range: 1px # f00 solid" & gt; & Lt; H1 & gt; Block 3 & lt; / H1> & Lt; / Div & gt; & Lt; Div class = "colonel-LG-4" style = "height: 175px; border: 1px green solid" & gt; & Lt; H1 & gt; Block 4 & lt; / H1> & Lt; / Div & gt; & Lt; Div class = "kernel-LG-4" style = "height: 175px; range: 1px blue solid" & gt; & Lt; H1 & gt; Block 5 & lt; / H1> & Lt; / Div & gt; & Lt; Div class = "colonel-LG-4" style = "height: 75px; range: 1px pink solid" & gt; & Lt; H1 & gt; Block 6 & lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - /.container - & gt; To ensure Block 4 under 1, you must use a line:  

  & lt; Div class = "container-fluid" & gt; & Lt; Div class = 'row' & gt; & Lt; Div class = "col-lg-4" style = "height: 200px; range: 1px #ccc solid" & gt; & Lt; H1 & gt; Block 1 & lt; / H1> & Lt; / Div & gt; & Lt; Div class = "col-lg-4" style = "height: 100px; range: 1px # ff0 solid" & gt; & Lt; H1 & gt; Block 2 & lt; / H1> & Lt; / Div & gt; & Lt; Div class = "col-lg-4" style = "height: 150px; range: 1px # f00 solid" & gt; & Lt; H1 & gt; Block 3 & lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = 'row' & gt; & Lt; Div class = "colonel-LG-4" style = "height: 175px; border: 1px green solid" & gt; & Lt; H1 & gt; Block 4 & lt; / H1> & Lt; / Div & gt; & Lt; Div class = "kernel-LG-4" style = "height: 175px; range: 1px blue solid" & gt; & Lt; H1 & gt; Block 5 & lt; / H1> & Lt; / Div & gt; & Lt; Div class = "colonel-LG-4" style = "height: 75px; range: 1px pink solid" & gt; & Lt; H1 & gt; Block 6 & lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

And note, just to ensure that LG's classes work only on high resolution, on small screens, it will be for each other (block 2 Block-1) -MD, -SM, and -X size stack on screen. [Update: 2015-03-18 per comment] If you want to do this, then they should be standing without space, only one other option is:

  & lt; Div class = "container-fluid" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = 'col-lg-4' & gt; & Lt; Div style = "height: 200px; range: 1px #ccc solid" & gt; & Lt; H1 & gt; Block 1 & lt; / H1> & Lt; / Div & gt; & Lt; Div style = "height: 175px; range: 1px green solid" & gt; & Lt; H1 & gt; Block 4 & lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = 'col-lg-4' & gt; & Lt; Div style = "height: 100px; range: 1px # ff0 solid" & gt; & Lt; H1 & gt; Block 2 & lt; / H1> & Lt; / Div & gt; & Lt; Div style = "height: 175px; range: 1px blue solid" & gt; & Lt; H1 & gt; Block 5 & lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-lg-4" & gt; & Lt; Div style = "height: 150px; range: 1px # f00 solid" & gt; & Lt; H1 & gt; Block 3 & lt; / H1> & Lt; / Div & gt; & Lt; Div style = "height: 75px; range: 1px pink solid" & gt; & Lt; H1 & gt; Block 6 & lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

It has been standing within the same column, but it limits you completely differently.

Bootstrap is to manually configure your grid to the desired display. For each viewing size ... it's not something that dynamically divides your sections into a piece of paper like a piece Trying to solve as you do the link provided.