css - ブートストラップ nav プッシュ左/プッシュ右

Question

水平メニュー/ナビゲーションの一部を左にフローティングさせ、他の部分を右にフローティングさせる必要があります。

このように:
Option1_Option2____Option3_Option4_ _ _ _ __ _ _ __Option5_Option6

私はこのテクニックを使用しています：

<ul class="nav navbar-nav pull-left">
  <li><a href="#">Option1</a></li>
  <li><a href="#">Option2</a></li>
  <li><a href="#">Option3</a></li>
  <li><a href="#">Option4</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
  <li><a href="#">Option5</a></li>
  <li><a href="#">Option6</a></li>
</ul>

しかし、フロートは（そうでなければならない）ので!important、メニューが小さい（タブレット/モバイル）画面サイズで折りたたまれると問題が発生します。
それは次のようになります。

オプション
1 オプション2 オプション3
オプション4 オプション
5
  オプション
  6

ご覧のとおり、最後の 2 つは左にフロートする必要があるため、クエリで.pull-right {float: right !important;}toを変更しようとしましたが、うまくいきません...行き詰まりました。@media クエリをオーバーライドする方法、またはこの問題に対処する他の方法はありますか?.pull-right {float: left !important;}@media!important