title: How do i change the Navbar Position when Bootstrap goes responsive
body: <p>The desktop view of the website got a logo and a navigation under it.<br>
  I want the position of the navigation to become above the logo (and also create a little space between the logo and navbar) when it switches to mobile view.</p>
  
  <p>Here is desktop view:</p>
  
  <p><a href="https://i.stack.imgur.com/QoAxA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QoAxA.jpg" alt="desktop"></a></p>
  
  <p>Mobile view:</p>
  
  <p><a href="https://i.stack.imgur.com/k35EV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k35EV.jpg" alt="mobile"></a></p>
  
  <p>What I want mobile view to <strong>be</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/UzsBk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UzsBk.jpg" alt="how I want mobile"></a></p>
  
  <hr> 
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="text-center logo"&gt;
          &lt;a href="index.html"&gt;&lt;img src="img/brand.png" /&gt;&lt;/a&gt;
          &lt;span class="brand-headline visible-desktop"&gt;
              &lt;p class="title-text"&gt;Example&lt;/p&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  
  &lt;!-- =begin navigation !--&gt;
      &lt;nav class="navbar navbar-default" role="navigation"&gt;
      &lt;div class="container"&gt;
        &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-target"&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;span class="navbar-brand brand" href="#"&gt;Brand&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
        &lt;div class="collapse navbar-collapse" id="navbar-target"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Schuhe&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>