Bootstrap kullanıyorum. Nasıl üç sütun hepsi aynı boyda yapabilir miyim?

Burada sorun bir ekran görüntüsü - mavi ve kırmızı sütunlar sarı sütun olarak aynı boyda olmak istiyorum.

İşte kod:

<div class="row">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>

Here is a Bootply example

Çözüm 1 kullanarak negatif kenar boşlukları (yanıt sonu gelmez)

Demo

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Çözüm 2 tablo kullanarak

Demo

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Çözüm 3 flex kullanarakAğustos 2015 ekledi. Yorum bu çözüm için geçerli değil önce gönderildi.

Demo

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}