引導程序4和用戶詳細信息 - 如何執行「引導程序」或正確的方式？

我正在使用引導4阿爾法（真的喜歡卡功能順便說一句）佈局。引導程序4和用戶詳細信息 - 如何執行「引導程序」或正確的方式？

所以，我在佈局中有這個區域，我希望電話和電子郵件信息放在同一行。我不是css大師，只知道很危險。所以，我不確定如何達到我所追求的效果，並且正確地做到這一點。任何提示或建議非常感謝。

這裏是我目前擁有的代碼：

<div class="media"> 
      <div class="media-left"> 
      <a href="#"> 
       <img class="media-object" src="img/avatars/adelle.jpg" alt="Generic placeholder image"> 
      </a> 
      </div> 
      <div class="media-body"> 
      <span class="favorite"><a href="#"><i class="fa fa-star"></i></a></span> 
       <h6 class="media-heading">Jacqueline Perry</h6> 
       <span class="company">Domino Technologies</span> 
       <div class="row"> 
        <div class="col-xs-12 col-sm-6 col-md-8"> 
        <ul class="details"> 
         <li class="phone"><i class="fa fa-mobile fa-lg fa-lg"></i> (123) 786-4533 </li> 
         <li class="email"><a href="#"><i class="fa fa-paper-plane-o"></i> [email protected]</a></li> 
         <li class="address"><i class="fa fa-map-marker"></i> 338 West 23rd Street New York, NY 10011, USA </li> 
        </ul> 
        </div> 
       </div> <!-- ./row --> 
      </div> 
     </div>

我試圖做到的，是這個（見下面的圖片）