The loading column located on the left when the columns above have different heights

Question

I have 4 divs aligning in a straight line in full screen mode. When the screen is smaller, they react. But there is a small problem: if one of the divs has a little more weight, then the other, responsiveness is not so beautiful.

In full screen mode:

When the 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: Place <div class="clearfix visible-sm-block"></div>after 2 divs worked. When using ng-repeat, use this code that 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 columns.

See: http://getbootstrap.com/css/#grid-responsive-resets

:

<div class="clearfix visible-sm-block"></div>

, :

<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>

, , sm.

Answer 2

div , , .

, , :

<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>

css:

.box-container { 
   height: 100px;
   overflow: auto; 
}

, !

Answer 3

div class=row. , 12 . , 12, .

, , - :

<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>

XS does not have to use clearflix; there, clearflix sizes are not optional. The number of your SM blocks is 24. Make sure you create clearflix after the counter reaches 12 for SM only.