Bootstrap column floating to the left when columns above have different heights - css

Question

I have 4 divs, aligning in a straight line in fullscreen mode.
When the screen is smaller, they get responsive.
But there is a small problem: if one of the divs has a bit more weight then the others, the responsiveness isn't that beautiful.
In fullscreen:
When screen gets smaller:
How it should be:
HTML:
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightskyblue">
<img src="../images/9.png" alt=""/>
</div>
TEXT
<div class="blue_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightgreen">
<img src="../images/12.png" alt=""/>
</div>
TEXT
<div class="green_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle cornflowerblue">
<img src="../images/14.png" alt=""/>
</div>
TEXT
<div class="cornflowerblue_bottom_border"></div>
</div>
EDIT: Putting <div class="clearfix visible-sm-block"></div> after the 2 divs worked.
When using ng-repeat, use this code I wrote:
`<div class="clearfix visible-XX-block" ng-if="$index%2==1"></div><!--For col-XX-6 class-->
<div class="clearfix visible-XX-block" ng-if="$index%3==2"></div><!--For col-XX-4 class-->
<div class="clearfix visible-XX-block" ng-if="$index%4==3"></div><!--For col-XX-3 class-->
<div class="clearfix visible-XX-block" ng-if="$index%6==5"></div><!--For col-XX-2 class-->`

Answer 1

Take a look at responsive column resets.
See: http://getbootstrap.com/css/#grid-responsive-resets
In your case you can add the following code after the second column:
<div class="clearfix visible-sm-block"></div>
So your code looks like this:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightskyblue">
<img src="../images/9.png" alt=""/>
</div>
TEXT
<div class="blue_bottom_border"></div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightgreen">
<img src="../images/12.png" alt=""/>
</div>
TEXT
<div class="green_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle cornflowerblue">
<img src="../images/14.png" alt=""/>
</div>
TEXT
<div class="cornflowerblue_bottom_border"></div>
</div>
</div>
Note that this doesn't change the height of the columns but it fixes the clearing for the sm breakpoint.

Answer 2

You should try to set your divs to the same height then and add a scrollbar if their content is too big to fit in them.
So for example this should be:
<div class="col-xs-12 col-sm-6 col-md-3 box-container">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
And in css:
.box-container {
height: 100px;
overflow: auto;
}
Hope this helps!

Answer 3

You are missing the class=row divs. You have to understand that, on each device, your cols number must be equal to 12 in each row. Also notice that if you get more than 12, you will get this weird behavior.
So, in order to fix that, you need to do something like:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
In XS it is optional to use the clearflix, on there sizes clearflix is not optional. Your SM blocks count are 24. Make sure to create a clearflix after the count reaches 12 just for SM.