Bootstrap 3 stacking issue - 1st col drops on medium - css

Question

I have the code below in Bootstrap 3. It all works perfectly except if you are on the tablet the logo drops down and doesn't stay top left. It works great on phone and works great on desktop.... What am I missing?
http://www.bootply.com/K3G0VtD0OS
<!-- always Stay top right and maintain the same size-->
<div class="col-xs-6 col-sm-2 pull-right">
<div class="row">
<div class="pull-right"> sharing icons </div>
<div class=""> account login </div>
</div>
<!-- LOGO Always stay top left no matter what size-->
<div class="col-xs-2 col-sm-12 col-md-2 logo pull-left"> logo image </div>
<!-- Always stay to the right of logo but at tablet, drop below the 1st and second column -->
<div class="col-xs-12 col-md-8 pull-left">
<div class="row">
<div class="col-xs-12 col-md-1"> </div>
<div class="col-xs-12 col-md-11"> Search bar goes here </div>
</div>

Answer 1

I believe that this is occurring because you only allow 2 bootstrap columns for BOTH "sharing icons" and "account login". So when you get to tablet size, 2 columns is not enough room and it wraps the "account login" (it does not wrap "sharing icons" because that element has the pull-right class on it).
You can fix this by reducing the unnecessary 8 columns for the search bar to 7 when in col-sm (tablet size), so that the wrapper for "sharing icons" and "account login" can have 3 columns instead of 2, while allowing it to still be 8 in col-md and higher.
Updated bootply
Change One:
<div class="col-xs-6 col-sm-3 col-md-2 pull-right"> <!-- Change col-sm-2 to col-sm-3 and add col-md-2 -->
<div class="row">
<div class="pull-right"> sharing icons </div>
<div class=""> account login </div>
</div>
</div>
Change Two:
<div class="col-xs-12 col-sm-7 col-md-8 pull-left"> <!-- Add col-sm-7 -->
<div class="row">
<div class="col-xs-12 col-md-1"> </div>
<div class="col-xs-12 col-md-11"> Search bar goes here </div>
</div>
</div>