Bootstrap 3 varied height columns

list-grid.html

<style type="text/css">
/*
 * Allows to usage of <ul> as .row and <li> as .col-**-*
 * Benefit of using <li> is that the column can be of varied height,
 * unlike when using div.row - columns collapse when heights are different.
 * The tricky part is to eliminate whitespaces between <li></li> tags.
 *
 * Usage: <ul class="list-grid row">
 *          <li class="col-md-3">...</li>
 *
 * Important: To ensure this work correctly on mobile,
 * make sure there are no whitespaces between <li> tags:
 * </li><li>
 */
ul.list-grid {
  display: block;
  list-style: none;
  padding: 0;
  font-size: 0;
}

  ul.list-grid > li {
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    float: none;
}
</style>

<ul class="list-grid row">
  <li class="col-md-3" style="background: red;">ONE </li>
  <li class="col-md-3" style="background: green;">TWO <br><br><br></li>
  <li class="col-md-3" style="background: blue;">THREE<br><br></li>
  <li class="col-md-3" style="background: yellow;">FOUR<br></li>
  <li class="col-md-3" style="background: grey;">FIVE</li>
</ul>

thanks