Vertically center alignment in BootStrap3

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="row center" style="border:1px solid black;">
  <div class="col-sm-4" style="background-color:white;">
   test
  </div>    
<div class="col-sm-8 ">
  test </br>
  test </br>
  test </br>
  </div>    
</div>


CSS

.center {  
  display:flex;
   align-items:center !important; 
   text-align:center;       
}

@media ( min-width:768px ) {
.center {
      display:flex;
      align-items:center !important;     
      text-align:center;     
  }
}

@media ( min-width: 992px ) {
   .center {     
     display:flex;
       align-items:center !important;      
       text-align:center;          
    }
}

@media ( min-width: 1200px ) {
    .center {      
       display:flex;
        align-items:center !important;      
        text-align:center;        
    }
}

CodePen