Сворачивание меню в Bootstrap

[CraZZZy-GameRRR]

Приветствую. Требуется помощь по Bottstrap-у.
Вот код заголовка с меню:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png"  alt=""/></a>
    </div>
    <div class="navbar-collapse collapse">
      <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu nav navbar-nav' ) ); ?>
	  <ul class="nav navbar-nav navbar-right">
		<li class="predzakazov" style="display: block;">
	           <!--
                        Этот блок должен оставаться на месте (слева от кнопки меню)
                   -->
		</li>
        <li class="order-now"><a href="javascript:;" onclick="modal();" id="link_open" onClick="ga('send', 'event', 'button', 'open_preorder');"  data-toggle="modal" data-target="#ordernow1"><? pll_e('preorder'); ?></a>
		</li>
      </ul>
    </div>
  </div>
<div>

Поскажите пожалуйста, что нужно сделать, чтобы когда на маленьком экране меню сворачивается, блок "predzakazov" оставался на своём месте, т.е. слева от кнопки меню.