Reference:

http://*.com/questions/20547819/vertical-align-with-bootstrap-3?answertab=votes#tab-top

.vcenter {

    display: inline-block;

    vertical-align: middle;

    float: none;

}

and coomment trick for extra space: 

<div class="row">

    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">

        <div style="height:10em;border:1px solid #000">Big</div>

    </div><!--

    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">

        <div style="height:3em;border:1px solid #F00">Small</div>

    </div>

</div>

TODO:
 flexbox