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

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

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 2

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.