Bootstrap 3.1.1 Navbar different layout when collapsed - html

Question

I am trying to share the navbar across all devices, but I want it to format differently on small screens than on large. I am new to Bootstrap so this might be obvious, but I am having trouble getting the menu right with a single set of code and not trying to do it with different rows and col-* settings.
Bootply Sample
I want two things actually. I would like the win and loss to be on the same line (which is close without the navbar-right) except they are not even in vertical position.
EDIT: I am able to correct this when removing navbar-right etc..., but do not get the navbar-right when the menu is condensed.
Secondly, I wanted the navbar-right, so when on a small display, all the badges align on the right hand side of the menu.
Is there a way to keep the menu smaller as well, so on a tablet it is not the whole width of the screen while on a phone it might be?
When the navbar normally draws, I want the badges beside the labels to keep the menu items smaller/closer together. Only on the pull down menu do I want them to go to the right.
Do I need to create two copies of the navigation to achieve this?

Answer 1

First, the badges seem aligned to me if you remove those navbar-right classes. If you are using that class just to float them right, you should be using pull-right but in this case there's no need.
Second, if you wrap your badges inside another span, then you can use media queries to float the container right on mobile devices.
<span class="badges">
<span class="badge alert-success">Win: 3</span>
<span class="badge alert-danger">Loss: 1</span>
</span>
/* Note that you can use Bootstrap's '#screen-sm-min' variable if using LESS.*/
#media (max-width: 767px) {
.badges {
float: right;
}
}
If you want your navbar to be full width on mobile but not any other device, you could try something like this:
#media (min-width: 768px) {
.navbar {
width: 80%;
margin: 0 auto;
}
}
Demo
Edit
For the changing width you can use Bootstrap's col-*-* classes like this:
<div class="wrap">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
...
</div>
</div>
</div>
That means for mobile it'll be full width, but anything from portrait tablet upwards will take up 10 of the 12 grid.
Demo