ブートストラップ4アルファ - モバイル/デスクトップ/タブレット

Question

のための変更のロゴ私は、ブートストラップ4アルファ

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 text-md-left text-center"> 
      <div class="navbar-brand"><img src="/wp-content/themes/tarps/assets/img/logo.png"> 
      </div> 
     </div> 
     <div class="col-md-6 text-md-right text-center"> 
      <div class="header-btn-grp"> 
       <div class="header-call-us">Get a Quote, Call Today!</div> 
       <a role="button" class="btn btn-danger btn-lg header-btn" href="tel:08XXXXXXX">Ph : <strong>(08) XXX XXXX</strong></a> 
       <div class="header-address">XXXX</div> 
      </div> 
     </div> 
    </div> 
</div> 

を使用してヘッダーを持っている私は私のロゴが異なる画面サイズに表示されている方法を最適化します。私たちは、デスクトップ向けのロゴの横長バージョンとモバイル向けの縦型バージョンを用意しています。

したがって、ロゴの2つのバージョン（ロゴとロゴポート）を持つのが最善の方法です。しかし、私は両方のロゴを組み込む方法がわからず、ブートストラップクラスが表示されるものを決めることができます（私はxs mdなどを使っていると思います）。

どうすればよいですか？

Answer 1

あなたは、ブートストラップ-4ソリューションを探しているなら、これは2ナビゲーションバーブランド要素、小型のデバイス（.hidden-sm-down）のために隠された1つを有することにより、achivedすることができ、 1つは大きなデバイス用に隠されています（.hidden-md-up）。

<div class="navbar-brand hidden-sm-down"><img src="logo-land.png"></div> 
<div class="navbar-brand hidden-md-up"><img src="logo-port.png"></div> 

Answer 2

https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes

特定のサイズのデバイス上の要素を非表示にしたり表示するためにブートストラップクラスを使用する方法を示します。ブートストラップvについて

4：

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/