title: Keep some items in Bootstrap navbar from collapsing
body: <p>I'm trying to create a Bootstrap navbar with the nav items on the left, and social/contact icons on the right. I would like the nav items to collapse, but the social/contact items to not collapse. They should be right there to click on for mobile users.</p>
  
  <p>I've looked over some answers to similar questions, but unfortunately, Bootstrap v4 is not backward compatible, and the solutions no longer work.</p>
  
  <p>My code seems pretty straightforward. If I put the social/contact items in their own div, outside of the collapse div, they lay out funny. However, if I put them into the collapse div, they line up just fine. But, they collapse, which I don't want. I tried messing a bit with flex parameters, but that only seemed to make things worse.</p>
  
  <p>In an ideal world, in mobile view, I'd have just the social/contact icons, and the hamburger menu button on the right.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#phone-number {
    padding: 0 1em;
    font-weight: bold;
  }
  
  .navbar-right {
    flex-direction: row;
  }
  
  @media (max-width: 767px) {
    #phone-number {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt; &lt;button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"&gt;&lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;&lt;/button&gt;
    &lt;div class="collapse navbar-collapse" id="navbarTogglerDemo02"&gt;
      &lt;div class="navbar-nav mr-auto mt-2 mt-lg-0"&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;Link&lt;/a&gt; &lt;a class="nav-item nav-link" href="#"&gt;Disabled&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="nav navbar-nav navbar-right"&gt;
      &lt;a class="nav-item nav-link" href="#"&gt;&lt;i class="fa fa-envelope fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a class="nav-item nav-link" href="#"&gt;&lt;i class="fa fa-phone fa-lg"&gt;&lt;/i&gt;&lt;span id='phone-number'&gt;509-123-4567&lt;/span&gt;&lt;/a&gt;
      &lt;a class="nav-item nav-link" href="#"&gt;&lt;i class="fa fa-twitter color-twitter fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a class="nav-item nav-link" href="#"&gt;&lt;i class="fa fa-facebook color-facebook fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a class="nav-item nav-link" href="#"&gt;&lt;i class="fa fa-linkedin color-linkedin fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt; &lt;button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"&gt;&lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;&lt;/button&gt;
    &lt;div class="collapse navbar-collapse" id="navbarTogglerDemo02"&gt;
      &lt;div class="navbar-nav mr-auto mt-2 mt-lg-0"&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;Link&lt;/a&gt; &lt;a class="nav-item nav-link" href="#"&gt;Disabled&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="nav navbar-nav navbar-right"&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;&lt;i class="fa fa-envelope fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;&lt;i class="fa fa-phone fa-lg"&gt;&lt;/i&gt;&lt;span id='phone-number'&gt;509-123-4567&lt;/span&gt;&lt;/a&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;&lt;i class="fa fa-twitter color-twitter fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;&lt;i class="fa fa-facebook color-facebook fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;&lt;i class="fa fa-linkedin color-linkedin fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>