vertical align middle just for single row

vertical-align.css

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Optional, to align inner items 
                              horizontally inside the column */
}
/**
 *  Do NOT include this part into your stylesheet.
 *  "flex: 1" or "flex-grow: 1" is added to make the inner div
 *  - Which is also a flex-item - take up all the horizontal space
 *  available space inside the flex container (.col-* elements)
 */

.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
  /* flex: 1; */
  
  flex-grow: 1;
}

vertical-align.html

<div class="container">
    <div class="row vertical-align">
        <!--
            Using col-xs-* classes are recommended.
            Otherwise you may run into a trouble.
         -->
        <div class="col-xs-6 col-md-8">
            <div style="height:10em;border:1px solid #000">Big</div>
        </div>
        <!--
            Using col-xs-* classes are recommended.
            Otherwise you may run into a trouble.
         -->       
        <div class="col-xs-6 col-md-4">
            <div style="height:3em;border:1px solid #F00">Small</div>
        </div>
        
    </div>
</div>