html - 两行导航栏以正确的顺序折叠

Question

我尝试了很多网上的例子，但无法得到想要的结果。

我正在使用 bootstrap 3+

我需要这样的菜单:

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

将 SM- 折叠成这样:

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

有人有什么建议吗？谢谢!

已编辑

到目前为止我得到了这个，但标志是 SM 上的第一件事-这是我最接近 ai 需要的东西。

<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

为您创建了一个片段。可能会有帮助

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

<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>