画面サイズで要素を配置します

Question

divをnavバーの内側に配置しようとしています。
デスクトップビューでは、2番目の正しい要素でなければなりません。
モバイルビューでは、センターにいたいと思います。
これを達成する方法。

所望の出力

<div class="container" id="main">  
<div class="navbar navbar-fixed-top"> 
    <div class="container"> 
    <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <div> 
    <a class="navbar-brand" href="/"><span>CANDY STORE</span></a>      
    </div> 
    <div class="nav-collapse collapse navbar-responsive-collapse"> 
    <ul class="nav navbar-nav pull-right"> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span>&nbsp;<strong class="caret" style="margin-top:-4px"></strong></a> 

     <ul class="dropdown-menu"> 
     <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> My Account</a></li> 
     <li class="divider"></li> 
     <li><a href="#"><span class="glyphicon glyphicon-off"></span> Sign out</a></li> 
    </ul> 
    </li> 
    </ul><!-- end nav pull-right --> 
</div><!-- end nav-collapse --> 
<div style="line-height:48px;" class="pull-right">Administrator</div> 
</div><!-- end container --> 
</div><!-- end navbar --> 
</div><!-- end #main--> 

https://jsfiddle.net/vgbx10sb/

Answer 1

だけ100％に.pull右のメディアクエリーと変化幅を加えます。 text-align：centerを.pull-rightに設定できるようになりました。

@media (max-width: 320px) { 
    .pull-right { 
    width: 100%; 
    text-align: center; 
    } 
} 
.pull-right { 
    background: red; 
} 

https://jsfiddle.net/e6pn5sy2/