Wrong position for col-md-4 in flexible layout with bootstrap

Question

Having some difficulties in resolving this issue (see screenshot). Basically, the fact that the first cell in the second line has a bigger height the 7th cell does not place properly ... Any workarounds? Is there something I am doing wrong?

Code extract

<div class="row">

  <!-- contribution -->
  <div class="col-xs-6 col-md-4" style="border:1px solid red;">

    <!-- pic -->
    <div class="col-xs-4 col-md-3">
      ...
    </div>

    <!-- payment -->
    <div class="col-xs-8 col-md-9">
      <div class="name">Anonymous</div>
      <div class="contributed">contributed</div>
    </div>

  </div>
  <!-- end contribution -->
</div>

It goes the same for all contributions. I can't use a row div for each line as on small screens rows will have only 2 contributions instead of 3. Using only col-xs-6 col-md-4 without rows allows me to have a flexible layout.

Answer 1

To build on Head In Cloud's answer, you will want to use the clearfix class after every 2nd div (visible-xs visible-sm) for xs and small screens, and then a clearfix class after every 3rd div (hidden-xs hidden-sm) for medium and larger screens. To reproduce your example from above:

<div class="row">
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix hidden-xs hidden-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix"></div> <!-- this one is needed for all screen sizes, so just use the clearfix class -->
</div>

Another option, if it would work for the type of content you're using, is to set a min-height on those elements. It would be an estimate, but if you set the min-height to a value slightly larger than your largest element, then all of those divs would be the same height, so they would stack correctly and you wouldn't have to worry about the clearfix. This isn't ideal, because if you ever change the content, you'd have to make sure it still falls within that min-height value.

Answer 2

Use clearfix class

Add the extra clearfix for only the required viewport

  <div class="clearfix visible-xs"></div>

have a look clearing-bootstrap

Answer 3

You can easily take care of that issue without bootstrap, i have been struggling with that issue too:

As i have expericed, having elements in float style so they behave properly on a responsive enviroment isn't easy, more like hellish. If you want that every element on the same "row" have the same height, the best aproach for IE9 and above is flexbox.

Sample, we have 4 boxes that doesnt fit on the container, so we want them to move to a new row if they dont fit but keep all the same height (Being the height value unknown):

<div class="container">
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
    <p>
      Lorem ipsum dolor sit amet.
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
</div>

Aplying this styles just fixes it:

.container {
  display: flex;
  display: -mx-flexbox;
  display: -webkit-flex;
  flex-grow: 0;
  -ms-flex-grow: 0;
  -webkit-flex-grow: 0;
  flex-wrap: wrap;

  width: 400px; /* Sample constraint */
  background-color: red; /*Visiblity */
}

.element {
  flex: none;
  width: 120px; /* Sample constraint */
  border: 1px solid blue; /*Visiblity */
}

Check this fiddle, it will give all you want. https://jsfiddle.net/upamget0/

Apply the col-12 on the container if need, but usually its not.

Source: CSS height 100% in automatic brother div not working in Chrome

Great info about flexbox can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/