Navigation float right part - css

Question

I have a question if and how the following is achievable through CSS:
View 1 (large screens):
View 2 (medium-sized screens):
Secondary question: How to center the navigation elements as soon as they are placed in a the second line?
View 3 (mobile):
My problem is, that the right part of the navigation (govel, bookmark, ..., login) should be in the same line as the logo, if there is not enough space (medium-sized screens, View 2). But if mobile navigation gets activated (View 3), I want to be the "Suche", "Kataloge", "Kategorien"... links first.
Also it would be nice if the navigation elements can be centered in (View 2).
The whole thing is build with Bootstrap 3.
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
nav#header img.favicon-logo {
padding-top: 5px;
height: 46px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" id="header">
<div class="container-fluid">
<!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/">
<img src="https://www.lotsearch.de/images/favicons/favicon_144x144.png" class="favicon-logo">
</a>
</div>
<!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
<div class="navbar-collapse collapse" id="main-menu" aria-expanded="false" style="height: 1px;">
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-search"></i>
Suche <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="fa fa-lightbulb-o fa-fw"></i> Suche (Aktuelle Auktionen)</li>
<li><i class="fa fa-archive fa-fw"></i> Suche (Archiv)</li>
</ul>
</li>
<li>
<a href="/auction-catalogs">
<i class="fa fa-book fa-fw"></i>
Kataloge </a>
</li>
<li>
<i class="fa fa-list-alt fa-fw"></i> Kategorien
</li>
<li>
<i class="fa fa-bell fa-fw"></i> Suchaufträge
</li>
<li>
<i class="fa fa-bar-chart fa-fw"></i> Künstler / Analysen
</li>
<li>
<i class="fa fa-newspaper-o fa-fw"></i> Blog
</li>
<li>
<i class="fa fa-star fa-fw"></i> Top-Seiten
</li>
<li>
<i class="fa fa-pencil-square-o fa-fw"></i> Registrieren
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/bids/management/bidlist" title="Vorgemerkte Gebote auf Ihrer Bietliste">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-gavel fa-fw"></i>
<span class="badge badge-orange" id="bidlist-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-gavel fa-fw"></i> Gebote (Bietliste)
</div>
</a>
</li>
<li>
<a href="/favorites" title="Merkzettel">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-bookmark fa-fw"></i>
<span class="badge badge-orange" id="bookmark-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-bookmark fa-fw"></i> Merkzettel
</div>
</a>
</li>
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="flag-icon flag-icon-de"></span>
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-langauge">
<li><span class="flag-icon flag-icon-gb"></span> GB </li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-user fa-fw"></i> Login <span class="caret"></span>
<ul class="dropdown-menu dropdown-lr animated fadeIn" role="menu">
<li>
<div class="col-lg-12">
<h4>Login</h4>
<form method="post" name="loginform" action="/user/login" id="loginform">
<div class="form-group "><label>Email</label><input name="identity" type="text" tabindex="1" class="form-control" value=""></div>
<div class="form-group ">
<label for="credential">Passwort</label> <span class="pull-right">Passwort vergessen?</span>
<input type="password" name="credential" tabindex="2" class="form-control" value="">
</div>
<div class="form-group "><button type="submit" name="submit" class="form-control btn-orange btn btn-default" tabindex="3" value=""><span class="fa fa-sign-in"></span> Einloggen</button></div>
</form>
<div class="text-center pt-5px">
<p class="pb-5px">- ODER -</p>
<a class="btn btn-default" href="/user/registration/select-product">
<i class="fa fa-pencil-square-o"></i> Registrierung </a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>