2行のナビゲーションバーが正しい順序で崩壊する

Question

私はインターネットから多くのexemplesを試しましたが、希望の結果を得ることができませんでした。

私は私はこのようなメニューを必要とするブートストラップ3+

を使用しています：誰でも提案を持っています

+----------------+ 
| Phone   | 
| Adress   | 
| Another info | 
|----------------| 
|    | 
|  LOGO  | 
|    | 
|----------------| 
|  MENU  | 
+----------------+ 

：このような何かにSM-をcollpaseするに

+-------------------------------------------------------------------------------+ 
|    |              Phone | 
|  LOGO  |              Adress | 
|    |            Another info | 
|-------------------------------------------------------------------------------| 
| Home         Page 1 | Page 2 | Page 3 | Page 4 | 
+-------------------------------------------------------------------------------+ 

？ ありがとう！

EDITED

これまでのところ、私はこれを得たが、ロゴは、これは私が必要と愛ものになった最も近いSM- 上の最初のものです。

<div class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="col-lg-6 col-md-6"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li><img src="images/logo.png"></li> 
     </ul> 
    </div> 
    <div class=" navbar-right col-lg-6 col-md-6 text-right" > 
     Adress<br> 
     Phone<br> 
     Info 
    </div> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" data-toggle="collapse" data-target="#mainNav"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 
     <div class="collapse navbar-collapse" id="mainNav"> 
     <ul id="navlist" class="nav nav-justified"> 
      <li><a href="#">Reports</a></li> 
      <li><a href="#">Account Management</a></li> 
      <li><a href="#">Messages</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">Request a Quote</a></li> 
      <li><a href="#">MainSite.com</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

スニペットを1つ作成してください。

.custom-navbar { 
 
    text-align:right; 
 
} 
 
@media (max-width: 768px){ 
 
\t .custom-navbar { 
 
\t text-align:left; 
 
\t } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class=" navbar-right col-lg-6 col-md-6 custom-navbar" > 
 
     Adress<br> 
 
     Phone<br> 
 
     Info 
 
    </div> 
 
    <div class="col-lg-6 col-md-6"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
     <li><img src="images/logo.png"></li> 
 
     </ul> 
 
    </div> 
 
    
 
    <div class="navbar-header pull-left"> 
 
     <button class="navbar-toggle" data-toggle="collapse" data-target="#mainNav"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 
 
     <div class="collapse navbar-collapse" id="mainNav"> 
 
     <ul id="navlist" class="nav nav-justified"> 
 
      <li><a href="#">Reports</a></li> 
 
      <li><a href="#">Account Management</a></li> 
 
      <li><a href="#">Messages</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      <li><a href="#">Request a Quote</a></li> 
 
      <li><a href="#">MainSite.com</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>