Bootstrap bottom align column within row

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="row abs-example">
    <div class="col-xs-4 mainBox">
        <h3>Heading</h3>
        <h4>Sub Heading</h4>
    </div>
    <div class="col-xs-4 buttonBox">
        <button class="btn btn-primary">ABSOLUTE fail</button>
    </div>
    <div class='col-xs-4'>
     This col should be 3
    </div>
</div>

<div class="row cols-bottom ib-example">
    <div class="col-xs-4 mainBox">
        <h3>Heading</h3>
        <h4>Sub Heading</h4>
    </div><div class="col-xs-4">
    <button class="btn btn-primary">Button </button>
    </div><div class='col-xs-4'>
     This col should be 3
    </div>
</div>

CSS

/* First, lets make this reusable, 
   not component specific (like 'buttonBox'),
   the helper classes will be: 
   .cols-bottom, and cols-middle*/

[class*='cols-'].row > *{
  float: none;
  position: relative;
  display: inline-block; 
  /* old ie fixes */
  *zoom: 1; 
  *display: inline;
}

.row.cols-bottom > *{
  vertical-align: bottom;
}

.row.cols-middle > *{
  vertical-align: middle;
}


/* Old/bad Example: Absolute Styling */

.row {
    position: relative;
}
.mainBox {
    border: solid thin black;
}

.buttonBox {
    position: absolute;
    bottom:0;
    right:0;
}



/* Examples coloring differentiation */
.abs-example{
    background-color:red;
    margin-bottom:10px;
}

.ib-example{
    background-color:green;
}

*{
    color:white;
}