Bootstrap 3 responsive columns of same height

index.html

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

style.css

/* Solution 1 using negative margins (doesn't break responsiveness)  */
.row{
    overflow: hidden; 
}

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




/* Solution 2 using table */
.row {
    display: table;
}

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




/* Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution. */
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

this below link help for more information

http://bootbites.com/demos/equalheight-columns/demos.html
http://bootbites.com/tutorials/responsive-equal-height-columns-bootstrap
https://github.com/liabru/jquery-match-height
http://codepen.io/imohkay/pen/gpard