Bootstrap flexbox widgets via http://www.bootply.com/126437 by @carolskelly

col.html

<div class="container"><h3>.row-flex (make columns equal heights in each row)</h3></div>
<div class="container">
  <div class="row row-flex row-flex-wrap">
    <div class="col-md-3">
  	  <div class="panel panel-default flex-col">
       <div class="panel-heading">Title flex-col</div>
       <div class="panel-body flex-grow">Content here -- div with .flex-grow</div>
       <div class="panel-footer">Footer</div>
       </div>
    </div>
	<div class="col-md-3">
      <div class="well"> 
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
        totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
        dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
      </div>
    </div>
    <div class="col-md-3">
  	  <div class="well"> 
        Duis pharetra varius quam sit amet vulputate.  
      </div>
    </div>
    <div class="col-md-3">
  	  <div class="well"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
        dolor, in sagittis nisi. 
      </div>
    </div>
  	
  </div><!--/row-->
</div><!--/container-->
<hr>

flex.css

html,body {
	height:100%;
}
      
.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
	-webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
	 margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
	width:100%;
}


.flex-col {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}

.flex-grow {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    x-webkit-flex: 2;
    flex: 1 1 auto;
}