title: Change order of items when the bootstrap navbar is opened
body: <p>On a Tablet resolution (wide) I want that the "Anmelden" and "Registrieren" button appears on the very right side but on a smartphone resolution both items should stay at the top of the menu (see image)</p>
  
  <p>How can I do that preferably without javascript?</p>
  
  <p><img src="https://i.stack.imgur.com/t3pWW.png" alt="enter image description here"></p>
  
  <p>Here is a plunker (not mine) where you can try out:</p>
  
  <p><a href="http://plnkr.co/edit/58wuSb2d6ztwUhbA01Mt?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/58wuSb2d6ztwUhbA01Mt?p=preview</a></p>
  
  <p>In the plunker the buttons are called "Login" and "Register" not like on my screenshot.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;AngularJS Plunker&lt;/title&gt;
  
      &lt;link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /&gt;
  
      &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
      &lt;script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"&gt;&lt;/script&gt;
      &lt;script data-require="ui-bootstrap@0.5.0" data-semver="0.5.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;style&gt;
      div.navbar-collapse.collapse {
          display: block;
          overflow: hidden;
          max-height: 0px;
          -webkit-transition: max-height .3s ease;
          -moz-transition: max-height .3s ease;
          -o-transition: max-height .3s ease;
          transition: max-height .3s ease;
      }
      div.navbar-collapse.collapse.in {
          max-height: 2000px;
      }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MainCtrl"&gt;
  
      &lt;nav class="navbar navbar-default" role="navigation"&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" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed"&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;a class="navbar-brand" href="#"&gt;Login&lt;/a&gt;
           &lt;a class="navbar-brand" href="#"&gt;Register&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
        &lt;div class="collapse navbar-collapse" ng-class="!navCollapsed &amp;&amp; 'in'"&gt;
  
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Meine Geräte&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Service&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Konfiguration&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;..::TEST::..&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
  
        &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
      &lt;/nav&gt;
  
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>