bootstrap で横並びした際、高さが揃わない

bootstrapでcol-* クラスを使用している際に、各コンテンツの量によって高さがちぐはぐになります。
するとどうなるかというと、レスポンシブで画面幅が小さくなって３列→２列となった際に、折り返しが変になります。

これを解消するのにとった方法。

col-* クラスを指定している一つ上の要素に「row-eq-height」を追加して、高さを3つそろえます。

htmlに追加

<div class="container">
  <div class="row row-eq-height>
    <div class="col-sm-4">
      カラム１
    </div>
    <div class="col-sm-4">
      カラム２
    </div>
    <div class="col-sm-4">
      カラム３
    </div>
  </div>
</div>

cssに追加

.row-eq-height {
display: -webkit-flex; /* Safari */
display: flex;
flex-wrap: wrap;
}