title: How to move a navbar with Bootstrap?
body: <p>I have two <code>navbar</code> containers on my page.
  Originally, <code>navbar1</code> stays on top of <code>navbar2</code>, but after I shrink the page and the responsive style come to have effect, I need <code>navbar2</code> to be on top of <code>nabvar1</code></p>
  
  <p><a href="http://jsfiddle.net/luissanchezm86/2ucL3/2/" rel="nofollow noreferrer">Here's a link to my demo: click</a></p>
  
  <p><strong>Here's an example of what I have:</strong>
  <img src="https://i.stack.imgur.com/c5C9s.png" alt="enter image description here"></p>
  
  <p><strong>Here's an example of what I need:</strong>
  <img src="https://i.stack.imgur.com/G1zBT.png" alt="enter image description here"></p>
  
  <p><strong>Update</strong></p>
  
  <p><strong>CSS Code Snippet</strong></p>
  
  <pre><code>.navbar
  {
      margin-bottom: 3px;
  }
  .btn-group
  {
      float: right;
  }
  /*****************************************************/
  /*************** LEFT NAV CUSTOM STYLES **************/
  /*****************************************************/
  .navbar-inner-left
  {
      padding-right: 0;
      padding-left: 0;
  }
  .navbar-left{}
  .navbar-left .nav &gt; li
  {
      float: none;
  }
  .navbar-inner-left div &gt; .nav-list
  {
      padding-left: 0;
  }
  .navbar-inner-left .container-fluid &gt; .brand
  {
      padding: 10px 5px 10px 5px;
  }
  .navbar-inner-left
  {
      border: none;
      background-color: #ffffff;
      background-image: -moz-linear-gradient(top,#ffffff,#ffffff);
      background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#ffffff));
      background-image: -webkit-linear-gradient(top,#ffffff,#ffffff);
      background-image: -o-linear-gradient(top,#ffffff,#ffffff);
      background-image: linear-gradient(to bottom,#ffffff,#ffffff);
      border: none;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffffffff',GradientType=0);
      -webkit-box-shadow: 0;
      -moz-box-shadow: 0;
      box-shadow: 0;
  }
  /************************************************* RESPONSIVE STUFFF**************************************************************/
  /************************************************* RESPONSIVE STUFFF**************************************************************/
  /************************************************* RESPONSIVE STUFFF**************************************************************/
  /************************************************* RESPONSIVE STUFFF**************************************************************/
  /************************************************* RESPONSIVE STUFFF**************************************************************/
  /************************************************* RESPONSIVE STUFFF**************************************************************/
  @media (min-width: 1200px){}
  @media (min-width: 980px){}
  @media (max-width: 979px){}
  @media (max-width: 767px){}
  @media (min-width: 768px) and (max-width: 979px)
  {
      .navbar-left .btn-navbar
      {
          margin-right: -15px;
      }
  
      .navbar-inner-left .container-fluid &gt; .brand
      {
          float: left;
      }
  }
  @media (max-width: 767px) and (min-width: 480px)
  {
      .nav-collapse .nav &gt; li &gt; a, .nav-collapse .dropdown-menu a
      {
          padding-left: 30px;
      }
  
      .navbar-inner-left .container-fluid &gt; .brand
      {
          padding-left: 30px;
      }
  
      .navbar-inner-left .nav-list &gt; .nav-header
      {
          padding-left: 20px;
      }
  
      .navbar-left .btn-navbar
      {
          margin-right: 26px;
      }
  }
  @media (max-width: 480px)
  {
      .nav-collapse .nav &gt; li &gt; a, .nav-collapse .dropdown-menu a
      {
          padding-left: 30px;
      }
  
      .navbar-inner-left .container-fluid &gt; .brand
      {
          padding-left: 30px;
      }
  
      .navbar-inner-left .nav-list &gt; .nav-header
      {
          padding-left: 20px;
      }
  
      .navbar-left .btn-navbar
      {
          margin-right: 26px;
      }
  }
  </code></pre>
  
  <p>HTML Code Snippet</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span2"&gt;
              &lt;img alt="140x140" src="http://lorempixel.com/140/140/" /&gt;
              &lt;div class="navbar navbar-left"&gt;
                  &lt;div class="navbar-inner navbar-inner-left"&gt;
                      &lt;div class="container-fluid"&gt;
                          &lt;a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;
                              &lt;/span&gt;&lt;/a&gt;&lt;a href="#" class="brand"&gt;Main Menu&lt;/a&gt;
                          &lt;div class="nav-collapse collapse navbar-responsive-collapse"&gt;
                              &lt;ul class="nav nav-list"&gt;
                                  &lt;li class="nav-header"&gt;List header &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Library&lt;/a&gt; &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Applications&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class="nav-header"&gt;Another list header &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt; &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt; &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="span10"&gt;
              &lt;div class="navbar"&gt;
                  &lt;div class="navbar-inner"&gt;
                      &lt;div class="container-fluid"&gt;
                          &lt;a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;
                              &lt;/span&gt;&lt;/a&gt;&lt;a href="#" class="brand"&gt;Title&lt;/a&gt;
                          &lt;div class="nav-collapse collapse navbar-responsive-collapse"&gt;
                              &lt;ul class="nav"&gt;
                                  &lt;li class="dropdown"&gt;&lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;Dropdown&lt;strong
                                      class="caret"&gt;&lt;/strong&gt;&lt;/a&gt;
                                      &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt; &lt;/li&gt;
                                          &lt;li class="divider"&gt;&lt;/li&gt;
                                          &lt;li class="nav-header"&gt;Nav header &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt; &lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="dropdown"&gt;&lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;Dropdown&lt;strong
                                      class="caret"&gt;&lt;/strong&gt;&lt;/a&gt;
                                      &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt; &lt;/li&gt;
                                          &lt;li class="divider"&gt;&lt;/li&gt;
                                          &lt;li class="nav-header"&gt;Nav header &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt; &lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="dropdown"&gt;&lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;Dropdown&lt;strong
                                      class="caret"&gt;&lt;/strong&gt;&lt;/a&gt;
                                      &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt; &lt;/li&gt;
                                          &lt;li class="divider"&gt;&lt;/li&gt;
                                          &lt;li class="nav-header"&gt;Nav header &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt; &lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="dropdown"&gt;&lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;Dropdown&lt;strong
                                      class="caret"&gt;&lt;/strong&gt;&lt;/a&gt;
                                      &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt; &lt;/li&gt;
                                          &lt;li class="divider"&gt;&lt;/li&gt;
                                          &lt;li class="nav-header"&gt;Nav header &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt; &lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;ul class="nav pull-right"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                                  &lt;li class="dropdown"&gt;&lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;Dropdown&lt;strong
                                      class="caret"&gt;&lt;/strong&gt;&lt;/a&gt;
                                      &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt; &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt; &lt;/li&gt;
                                          &lt;li class="divider"&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt; &lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="btn-group"&gt;
                  &lt;button class="btn" type="button"&gt;
                      &lt;em class="icon-align-left"&gt;&lt;/em&gt;
                  &lt;/button&gt;
                  &lt;button class="btn" type="button"&gt;
                      &lt;em class="icon-align-center"&gt;&lt;/em&gt;
                  &lt;/button&gt;
                  &lt;button class="btn" type="button"&gt;
                      &lt;em class="icon-align-right"&gt;&lt;/em&gt;
                  &lt;/button&gt;
                  &lt;button class="btn" type="button"&gt;
                      &lt;em class="icon-align-justify"&gt;&lt;/em&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in Advance!</p>