Как выровнять блоки по вертикали?

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="container"> 
    <div class="row vertical-center"> 
        <div class="col-md-3"> 
            контент 
        </div> 
        <div class="col-md-3"> 
            контент контент контент контент контент 
        </div> 
        <div class="col-md-3"> 
            контент контент контент контент контент контент контент контент контент 
        </div> 
        <div class="col-md-3"> 
            контент контент контент контент 
        </div> 
    </div> 
</div>

.row{ 
    font-size: 0; 
} 
.vertical-center { 
    display: inline-block!important; 
    vertical-align: middle!important; 
    float: none!important; 
    font-size: 15px; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="container"> 
    <div class="row"> 
        <div class="col-md-3 vertical-center"> 
            контент 
        </div> 
        <div class="col-md-3 vertical-center"> 
            контент контент контент контент контент 
        </div> 
        <div class="col-md-3 vertical-center"> 
            контент контент контент контент контент контент контент контент контент 
        </div> 
        <div class="col-md-3 vertical-center"> 
            контент контент контент контент 
        </div> 
    </div> 
</div>

*{ 
  margin:0; 
  padding:0; 
  text-decoration:none; 
  list-style:none; 
  font-size:18px; 
  box-sizing:bordr-box; 
} 
menu{ 
  width:100%; 
  max-width:100%; 
  background:yellow; 
  overflow:hidden; 
} 
menu section{ 
  width:100%; 
  max-width:100%; 
} 
menu section.top div{ 
  display:table-cell; 
  width:1000px; 
  height:100px; 
  background:#DEDEDE; 
  border-right:1px solid #fff; 
  box-sizing:border-box; 
  position:relative; 
} 
.num ul,.phone ul,.sale ul{ 
  display:block; 
  width:100%; 
  height:40px; 
  background:; 
  position:absolute; 
  top:50%; 
  margin-top:-25px; 
  margin-left:25%; 
} 
.graf ul{ 
   display:block; 
  width:100%; 
  height:40px; 
  background:; 
  position:absolute; 
  top:50%; 
  margin-top:-30px; 
  margin-left:25%;  
} 
 
menu section.bottom{ 
  background:#fff; 
} 
menu section.bottom .menu{ 
  display:table; 
  width:65%; 
  background:#fff; 
} 
menu section.bottom ul{ 
  display:table-row; 
} 
 
menu section.bottom li{ 
  display:table-cell; 
  vertical-align:bottom; 
} 
menu section.bottom li a{ 
  display:table-cell; 
  width:1000px; 
  height:50px; 
  text-align:center; 
  vertical-align:middle; 
} 
section.bottom .myFunction{ 
  float:right; 
  width:25%; 
  height:50px; 
  background:#fff; 
  line-height:50px; 
  margin-top:-50px; 
  text-align:center; 
}

<menu> 
  <section class="top"> 
    <div class="num">  
     <ul>  
        <li>Консультация</li> 
        <li>+7 908 320 00 00 </li> 
      </ul> 
    </div> 
    <div class="phone">  
      <ul>  
         <li>Заказать звонок</li> 
        <li>sale@test.ru</li>      
      </ul> 
    </div> 
    <div class="graf"> 
      <ul>  
        <li>Заказать звонок</li> 
        <li>sale@test.ru</li>  
         <li>sale@test.ru</li>  
      </ul>     
    </div> 
    <div class="sale"> 
      <ul>  
        <li>Заказать звонок</li> 
        <li>sale@test.ru</li>  
      </ul>      
    </div> 
  </section> 
  <section class="bottom">  
<div class="menu"> 
 <ul> 
   <li><a href="">Главная</a></li> 
   <li><a href="">О магазине</a></li> 
   <li><a href="">Статьи</a></li> 
   <li><a href="">Контакты</a></li> 
</ul>  
</div> 
  <p class="myFunction"><a href="">Мой кабинет</a></p> 
  </section> 
</menu>