title: Button to the left side of navbar-brand
body: <p>I am trying to put a button on the left side of navbar-brand for toggling a sidebar. The button toggles the sidebar. In desktop mode, it works fine but on smaller screens, it changes position and comes to the right side of the navbar-brand.
  Here are the screenshots.</p>
  
  <p><img src="https://i.stack.imgur.com/AI45L.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/azVkX.png" alt="enter image description here"></p>
  
  <pre><code>    &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;/button&gt;
                  &lt;button type="button" data-toggle="#sidebar" id="sidebar-toggle" class="navbar-left navbar-toggle"&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;/button&gt;
                  &lt;a class="navbar-brand" href="Login.aspx" style="vertical-align: middle"&gt;
                      &lt;img src="Logo.png" style="vertical-align: middle" /&gt;&lt;/a&gt;
                  &lt;label class="navbar-text text-center text-primary" style="vertical-align:10px;font-size:medium"&gt;Example Distribution&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse" id="navbar"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;form class="navbar-form navbar-right"&gt;
                      &lt;input type="text" class="form-control" placeholder="Search..." /&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="container-sidebar"&gt;
          &lt;div id="sidebar"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Explore&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Users&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sign Out&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>