Bootstrap Equal Height Column Breaks Responsiveness

Question

I am trying to achieve equal row height for bootstrap class using container, row and col-sm-4. Initially, I asked a Question which was marked as a duplicate. However, I am finding that there is a problem with the solutions provided.

The problem is that, in a normal three col-sm-4 situation, I get 3 rows in big screen and exactly one row when I reach the 'breakpoint'. However, the provided solution (JSFiddle) breaks that rule. Depending on the screen size, I sometimes get 1, 2, 3 or even 4 columns based on the screen size as shown in the image below.

How can I achieve equal height while maintaining the standard behaviour for bootstrap?

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      Row 1 Col 1
    </div>
    <div class="col-sm-4">
      This is some long tex that has a greater height than the rest
    </div>
    <div class="col-sm-4">
      Row 1 Col 3
    </div>
    <div class="col-sm-4">
      Row 2 Col 1
    </div>
    <div class="col-sm-4">
      Row 2 Col 2
    </div>
    <div class="col-sm-4">
      Row 3 Col 3
    </div>`
  </div>
</div>

// css
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
  margin: 10px;
}
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

score 2 · Accepted Answer · answered May 02 '17 at 13:54

This is still a duplicate of How can I make Bootstrap columns all the same height?

https://jsfiddle.net/44mnaqxf/

If you read through the answers, a media query is needed to apply the "equal height" responsively.

@media (min-width: 768px) {
  .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-wrap: wrap;
  }
}

score 0 · Answer 2 · answered May 02 '17 at 13:40

Equal height using Jquery

var biggesthei = 0;

$(".col-sm-4").each(function() {

  if ($(this).height() > biggesthei) {
    biggesthei = $(this).height()
  }

  if ($(window).width() < 320) {
    $(this).height() = biggesthei

  }

  $(".col-sm-4").css("min-height", biggesthei);
});

.col-sm-4 {
  width: 30%;
  float: left;
  margin-left: 1%;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4">
  Row 1 Col 1
</div>
<div class="col-sm-4">
  Row 1 Col 1 Row 1 Col 1
    Row 1 Col 1 Row 1 Col 1
      Row 1 Col 1 Row 1 Col 1
        Row 1 Col 1 Row 1 Col 1
</div>
<div class="col-sm-4">
  Row 1 Col 1
</div>

Thanks for the solution but jQuery is not an option really for me because I am using React and it is not best practice — ErnieKev, May 02 '17 at 13:47

Bootstrap Equal Height Column Breaks Responsiveness

2 Answers2