Bootstrap 5 Navbar Collapsing One Set of Links with Toggler to Left of Second Set

Question

I am trying to create a responsive navbar that works in a fashion such that I have two sets of right-aligned links. The first set should collapse, but the second set should remain visible at all times, with the toggler to the left of the latter set of links. That means, in the snippet below, that "Link One", "Link Two", and "Link Three" should collapse, but "Link Four" and "Link Five" should remain visible. This is a very simplified version of what Facebook does with their navbar.

Unfortunately, this is the closest that I have been able to get, though. Before the toggler is shown, everything is where it should be. When I expand, however, "Link Four" and "Link Five" drop to the bottom of the navbar, instead of staying at the top. I have tried manipulating the second set of links directly, via CSS, and could also not seem to accomplish what I was looking for.

Any feedback would be greatly appreciated, as front-end development is definitely not my strong suit.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-dark bg-dark navbar-expand-md">
      <a href="#" class="navbar-brand ms-3">[Brand]</a>      
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="btn">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a href="#" class="nav-link mx-3">Link One</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link mx-3">Link Two</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link mx-3">Link Three</a>
          </li>
        </ul>
      </div>      
      <ul class="navbar-nav ms-auto flex-row">
        <li class="nav-item">
          <a href="#" class="nav-link mx-3">Link Four</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link mx-3">Link Five</a>
        </li>
      </ul>      
    </nav>

Answer 1

Looks like you just need to use the ordering classes to get what you want. In this case order-md-last on the 2nd set of links, and then they will be natural order (2) on less than md breakpoints (xs,sm):

<nav class="navbar navbar-dark bg-dark navbar-expand-md">
    <a href="#" class="navbar-brand ms-3">[Brand]</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
        <span class="navbar-toggler-icon"></span>
    </button>
    <ul class="navbar-nav ms-auto flex-row order-md-last">
        <li class="nav-item">
            <a href="#" class="nav-link mx-3">Link Four</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link mx-3">Link Five</a>
        </li>
    </ul>
    <div class="collapse navbar-collapse" id="btn">
        <ul class="navbar-nav ms-auto">
            <li class="nav-item">
                <a href="#" class="nav-link mx-3">Link One</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link mx-3">Link Two</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link mx-3">Link Three</a>
            </li>
        </ul>
    </div>
</nav>

responsive demo