Я пытаюсь использовать следующие правила CSS для вертикального выравнивания по центру содержимого в начальной загрузке 3 -

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

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

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

И вот мой HTML

<div class="row center"> <!--if .center is here valign works-->
  <div class="col-sm-4"> <!--if .center is here valign doesn't work-->
     test
  </div>    
<div class="col-sm-8 ">
  test </br>
  test </br>
  test </br>
</div>    

Вы можете найти это вcodepen.io.

Любая помощь?