Making a responsive navbar layout with two logos and centered text - css

Question

I need to do a responsive navbar with:
LOGO1(left side) text(centered) LOGO2(right side)
I am trying the next but It doesnt work when when resized to small screens.
Here is my problem: when in "lg" size the screen is correct. But when in "md" size or smaller the LOGO2 goes to left side.
And, in 'xs' size the 'text' continues showing with the LOGO2 below it.
In my markup code I have some angular staff, but it is not important to answer the question.
What am I doing wrong?
//markup
div class="container-fluid example2">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" ng-click="isMyNavCollapsed = !isMyNavCollapsed" ng-init="isMyNavCollapsed=false">
<span class="sr-only">Navegação</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img src="img/SoundCloud64.png" alt="Cloud Clínica">
</a>
</div>
<p class='navbar-text navbar-center font35'><strong>Retire seu ticket aqui</strong></p>
<div class="collapse navbar-collapse" id="navbar_right" uib-collapse="isMyNavCollapsed">
<ul class="nav navbar-nav navbar-right">
<li><img class="img-responsive" height="150" width="200" src="img/red-ticket-md.png" /></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
//css
<style type="text/css">
.example2 .navbar-brand>img {
padding: 7px 15px;
}
.navbar-right img{
padding: 7px 15px;
}
.navbar-center
{
display:inline-block;
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
overflow: visible;
height: 0;
padding:15px 10px 10px 10px;
z-index: 10099;
}
.navbar-nav,
.navbar-right {
display:inline-block;
position: relative;
z-index: 100100;
}
</style>