ロゴを左に揃えてデスクトップ/次にモバイルを中心に - ブートストラップ

Question

私はHTML & cssから休憩しました。今はブートストラップフレームワークを使って新しいウェブサイトを作ろうとしています。

私は自分のロゴをデスクトップデバイスに置いておく必要がありますが、モバイル用には右のテキストも合わせて中心に置いています。助けてもらえますか？ありがとう！

<div class="container"> 
<header id="headertop"> 

<div class="row"> 
    <div class="col-lg-9 col-md-9 col-xs-12"> 
     <div class="logo-top"> 
     <a href="index.html"> <img class="img-responsive" src="images/ejc-logo.png"/> </a> 
     </div> <!-- // end .logo-top --> 

    </div> <!-- // end .col LOGO --> 


    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> 

     <div class="contact-info-top"> 
      <span class="contact-phone hidden-sm hidden-xs"> 973.452.9716 </span> <br> 
      <span class="contact-email hidden-sm hidden-xs"> support@ejuicecrafters.com </span> 

      <div class="contact-info-top-mobile text-center"> 

      <h5 class="contact-phone-mobile hidden-md hidden-lg hidden-xl"> 973.452.9716 </span> <br> 
      <h5 class="contact-email-mobile hidden-md hidden-lg hidden-xl"> support@ejuicecrafters.com </span> 

      </div> 
     </div> 

    </div> 

Answer 1

CSSファイル：

@media (max-width: 768px) { 
    .img-responsive { 
     transform: translateX(-50%); 
     left: 50%; 
     position: absolute; 
     } 
    } 

デモ：http://www.bootply.com/YL64euYYAZ

Answer 2

私はあなたのコードを簡素化しています。結果を確認してください。あなたは何を改善する必要がありますか？

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
@media (max-width: 767px) { 
 
    .logo-top img { 
 
    margin: 0 auto; 
 
    } 
 
    .contact-info-top .contact-phone, 
 
    .contact-info-top .contact-email { 
 
    text-align: center; 
 
    } 
 
} 
 

 
@media (min-width: 768px) { 
 
    .contact-info-top { 
 
    /* add what you need */ 
 
    } 
 
    .contact-info-top .contact-phone { 
 
    /* add what you need */ 
 
    } 
 
    .contact-info-top .contact-email { 
 
    /* add what you need */ 
 
    } 
 
}

<div class="container"> 
 
    <header id="headertop"> 
 
    <div class="row"> 
 

 
     <div class="col-xs-12 col-sm-9 logo-top"> 
 
     <a href="index.html"><img class="img-responsive" src="http://placehold.it/50x50/c69/fff/?text=logo" /></a> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-3 contact-info-top"> 
 
     <div class="contact-phone"> 973.452.9716 </div> 
 
     <div class="contact-email"> support@ejuicecrafters.com </div> 
 
     </div> 
 

 
    </div> 
 
    </header> 
 
</div>

Answer 3

これは動作します....

<div class="container"> 
    <header id="headertop"> 

    <div class="row"> 
     <div class="col-lg-9 col-md-9 col-sm-12"> 
      <div class="logo-top"> 
      <a href="index.html"> <img class="img-responsive" src="images/ejc-logo.png"/> </a> 
      </div> <!-- // end .logo-top --> 

     </div> <!-- // end .col LOGO --> 


     <div class="col-lg-3 col-md-3 col-sm-12"> 

      <div class="contact-info-top"> 
       <span class="contact-phone hidden-sm hidden-xs"> 973.452.9716 </span> <br> 
       <span class="contact-email hidden-sm hidden-xs"> support@ejuicecrafters.com </span> 

       <div class="contact-info-top-mobile text-center"> 

       <h5 class="contact-phone-mobile hidden-md hidden-lg hidden-xl"> 973.452.9716 </span> <br> 
       <h5 class="contact-email-mobile hidden-md hidden-lg hidden-xl"> support@ejuicecrafters.com </span> 

       </div> 
      </div> 

     </div> 

を