ブートストラップグリッド項目を移動

Question

2つのブートストラップセクションがあるとします。最初にロゴが入っています。もう1つは別の2つのブートストラップセクションに分かれています。ただ、このように...今

<div class="col-md-3"> 
<img src="logo.png"> 
</div> 

<div class="col-md-9"> 
<div class="col-md-12"> 
    <i class="fa fa-phone"></i> 
    <i class="fa fa-marker"></i> 
</div> 
<div class="col-md-12"> 
    //Navbar 
</div> 
</div> 

私のクライアントは、ナビゲーションリンクの背後にあるモバイルビュー上のナビゲーション領域で、フォント素晴らしいフォントセクションを追加する方法を示して要求しています。スクリーンショットをご覧ください。他のdivセクションに配置されたソーシャルアイコン。だから私はそれをnavリンクに移動することはできません。しかし、私はこの方法でメディア採石場を試しました。ナビゲーションリンクとしてソーシャルアイコンを追加します。通常の画面で非表示にし、モバイルビューで表示します。それが私の要件を達成する正当な方法ですか？

Answer 1

モバイルビューにそれを表示し、通常の画面に非表示にします。それは正当なものです 私の要件を達成する方法は？

あなたは、画面サイズに応じて/非表示要素を表示するためにクラスを使用することができます

http://getbootstrap.com/css/#responsive-utilities

getbootstrapウェブサイトに応答ユーティリティセクションを見てください。あなたの場合、hidden-sm hidden-md hidden-lgクラスを使ってdiv内にあなたのソーシャルアイコンがあります。

<div class="hidden-sm hidden-md hidden-lg"></div> 

このdivの要素は、スマートフォンに最適な画面が表示されるまで隠されています。ブートストラップ・クラスを使用

Answer 2

： - 反対である（SM、MD、LG *）を

.hidden-sm 
.hidden-md 
.hidden-lg 

は、それらのメディアクエリに非表示になります、あなたはまた、* .visible-使用することができます。私はあなたの列を区切るために、行を使用することをお勧めサイドノートで

、：ブートストラップと

<div class="row"> 
    <div class="col-md-3"> 
     <img src="logo.png"> 
    </div> 

    <div class="col-md-9"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <i class="fa fa-phone"></i> 
       <i class="fa fa-marker"></i> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       //Navbar 
      </div> 
     </div> 
    </div> 
</div> 

滞在インライン:)