Bootstrap子菜单在移动分辨率上向右打开

Question

我有以下引导程序菜单。我希望该菜单能够查看低于640px的分辨率，如附图所示。你能否告诉我一些关于如何实现这个或类似菜单示例的建议。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="collapse navbar-collapse js-navbar-collapse">
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown dropdown-large">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-plus"></span> Cursuri elevi</a>
      <div class="dropdown-menu dropdown-menu-large">
        <div class="container">
          <ul class="col-xs-3 col-md-3 menu-wrapper">
            <li class="dropdown-header">Limbi străine</li>
            <li class="menu"><a href="cursuri-elevi/cursuri-engleza-online">Engleză</a></li>
            <li class="menu"><a href="cursuri-elevi/cursuri-franceza-online">Franceză</a></li>
            <li class="menu"><a href="cursuri-elevi/cursuri-germana-online">Germană</a></li>
            <li class="menu"><a href="cursuri-elevi/cursuri-spaniola-online">Spaniolă</a></li>
            <li class="menu"><a href="cursuri-elevi/cursuri-japoneza-online">Japoneză</a></li>
            <li class="menu"><a href="cursuri-elevi/limba-romana-pentru-straini">Limba română pentru străini</a></li>
          </ul>
          <ul class="col-xs-3 col-md-3 menu-wrapper">
            <li class="dropdown-header">Uman</li>
            <li class="menu"><a href="cursuri-elevi/limba-si-literatura-romana">Limba și literatura română</a></li>
            <li class="menu"><a href="cursuri-elevi/cursuri-geografie-online">Geografie</a></li>
            <li class="dropdown-header">Real</li>
            <li class="menu"><a href="cursuri-elevi/cursuri-biologie-online">Biologie</a></li>
            <li class="menu"><a href="cursuri-elevi/cursuri-chimie-online">Chimie</a></li>
          </ul>
          <ul class="col-xs-6 col-md-6 menu-wrapper">
            <div class="menu-promo">
              <div class="text">
                <b>Cursuri de germană elevi</b>
                <p>Prețuri începând de la
                  <br /><b>20</b> ron / <b>60</b> minute</p>
                <a href="cursuri-elevi/cursuri-germana-online" class="btn orange sign-in-btn" data-action="sign-in">Înscrie-te</a>
              </div>
              <div class="image"></div>
            </div>
          </ul>
        </div>
      </div>
    </li>
    <li class="dropdown dropdown-large">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-plus"></span> Cursuri adulți</a>
      <div class="dropdown-menu dropdown-menu-large">
        <div class="container">
          <ul class="col-xs-3 col-md-3 menu-wrapper">
            <li class="dropdown-header">Limbi străine</li>
            <li class="menu"><a href="cursuri-adulti/cursuri-engleza-online">Engleză</a></li>
            <li class="menu"><a href="cursuri-adulti/cursuri-franceza-online">Franceză</a></li>
            <li class="menu"><a href="cursuri-adulti/cursuri-germana-online">Germană</a></li>
            <li class="menu"><a href="cursuri-adulti/cursuri-spaniola-online">Spaniolă</a></li>
            <li class="menu"><a href="cursuri-adulti/cursuri-japoneza-online">Japoneză</a></li>
            <li class="menu"><a href="cursuri-adulti/limba-romana-pentru-straini">Limba română pentru străini</a></li>
          </ul>
          <ul class="col-xs-3 col-md-3 menu-wrapper">
            <li class="dropdown-header">Parenting</li>
            <li class="menu"><a href="cursuri-adulti/vreau-sa-fiu-parinte">Vreau să fiu părinte.</a></li>
            <li class="menu"><a href="curs-in-adaugare">Sunt părinte de preșcolar.</a></li>
            <li class="menu"><a href="curs-in-adaugare">Copii mari, griji mai mari?</a></li>
            <li class="menu"><a href="curs-in-adaugare">Lasă-l să zboare sau provocările sindromului "cuibului gol".</a></li>
            <li class="menu"><a href="curs-in-adaugare">Sunt părinte de departe.</a></li>
          </ul>
          <ul class="col-xs-3 col-md-3 menu-wrapper">
            <li class="dropdown-header">Vânzări</li>
            <li class="menu"><a href="cursuri-adulti/7-1-pasi-prin-care-sa-ti-cresti-vanzarile">7+1 pași prin care să-ți crești vânzările</a></li>
            <li class="menu"><a href="curs-in-adaugare">Vânzarea nu este prezentare de produse</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li class="dropdown dropdown-large">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-plus"></span> Cursuri firme </a>
      <div class="dropdown-menu dropdown-menu-large">
        <div class="container">
          <ul class="col-xs-3 col-md-3 menu-wrapper">
            <li class="dropdown-header">Limbi străine</li>
            <li class="menu"><a href="cursuri-firme/cursuri-engleza-online">Engleză</a></li>
            <li class="menu"><a href="cursuri-firme/cursuri-franceza-online">Franceză</a></li>
            <li class="menu"><a href="cursuri-firme/cursuri-germana-online">Germană</a></li>
            <li class="menu"><a href="cursuri-firme/cursuri-spaniola-online">Spaniolă</a></li>
            <li class="menu"><a href="cursuri-firme/cursuri-japoneza-online">Japoneză</a></li>
            <li class="menu"><a href="cursuri-firme/limba-romana-pentru-straini">Limba română pentru străini</a></li>
          </ul>
          <ul class="col-xs-3 col-md-3 menu-wrapper">
            <li class="dropdown-header">Vânzări</li>
            <li class="menu"><a href="cursuri-firme/7-1-pasi-prin-care-sa-ti-cresti-vanzarile">7+1 pași prin care să-ți crești vânzările</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li class="dropdown dropdown-large menu-phone">
    </li>
    <li class="dropdown dropdown-large menu-number">123456778</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

示例：