bootstrap - navbar - exchange brand and toggle - html

Question

I would like to switch the brand and the toggle button in mobile view if the viewport is small enough. On desktop viewport the brand icons shall be on the right side and the links shall be displayed normaly.
Examples:
Desktop:
+--------------------------------------------+
|Link1 Link2 BrandIcon1 BrandIcon2 |
+--------------------------------------------+
Mobile:
+----------------------------+
|[=] BrandIcon1 BrandIcon2 |
+----------------------------+
What is the easiest and cleanest way to code this?
Made a Pen: http://codepen.io/Kaito23/pen/Wxmxgm
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.navbar-toggle {
float:left;
}
.navbar-brand {
float: right;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<ul class="visible-xs visible-xs visible-sm visible-md visible-lg nav navbar-nav navbar-right">
<li><img src="http://images.fatcow.com/icons/32/wordpress.png" /></li>
<li><img src="http://www.wbdesignideas.com/images_drf_color.png" /></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Currently the problem is that when the icons are in the navbar-collapse class they disapear. If I put them under the collapse div, they are in a
new row.
Thanks in advance
Greetings
Kaito

Answer 1

Let's take Bootstrap's default navbar and remove unnecessary parts.
Then change floats to the opposite direction.
And add second brand before the first one. (It's because of the float: right; property.)
Please check the result: http://codepen.io/glebkema/pen/PzLbmz
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (min-width: 768px) {
.navbar-header {
float: right;
}
}
.navbar-brand {
float: right;
}
.navbar-toggle {
float: left;
margin-left: 15px;
margin-right: 0;
}
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand 2</a>
<a class="navbar-brand" href="#">Brand 1</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Left 1</li>
<li>Left 2</li>
<li>Left 3</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>