は、ブートストラップ・ナビゲーション

Question

で場所を切り替えます。しかし、私は社会的なアイコンが小さなデバイス上の右側と左側のナビゲーションボタンに表示するのですか方法を知りたいです。申し訳ありませんが、私はこれに新しいですし、私はそれを見つけましたが、解決策を見つけることができません。

あなたは、私がhere達成しようとしています何の例を参照することができます。ここ

はHTMLコードです（トップ黒のナビゲーションメニューを。）： - あなたが使用することができます

<nav class="navbar navbar-default navbar-static-top"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <i class="fa fa-facebook" aria-hidden="true"></i> 
     <i class="fa fa-youtube-play" aria-hidden="true"></i> 
     <i class="fa fa-twitter" aria-hidden="true"></i> 
     <i class="fa fa-google-plus" aria-hidden="true"></i> 
     <i class="fa fa-pinterest-p" aria-hidden="true"></i> 
     <i class="fa fa-instagram" aria-hidden="true"></i> 
     <i class="fa fa-heart" aria-hidden="true"></i> 
     <i class="fa fa-tumblr" aria-hidden="true"></i> 
     <i class="fa fa-soundcloud" aria-hidden="true"></i> 
     <i class="fa fa-vimeo-square" aria-hidden="true"></i> 
     <i class="fa fa-linkedin" aria-hidden="true"></i> 
     <i class="fa fa-rss" aria-hidden="true"></i> 
    </div> 
    <div id="navbarCollapse5" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <form> 
       <input type="text" name="search" placeholder="Search Text Here..."> 
       <button><i class="fa fa-search" aria-hidden="true"></i></button> 
      </form> 
     </ul> 
    </div> 
</div> 

Answer 1

これについてのcssメディアクエリ。このような 何か、

@media (min-width: 500px) { 
    .cls1 { 
    float: left; 
    } 
} 

@media (min-width: 501px) { 
    .cls2 { 
     float: right; 
    } 
} 

私はあなたのfiddleを更新しました。あなたはCSSフレックスプロパティを使用することができます