En primer lugar, como descargo de responsabilidad Soy un novato completo en lo que respecta a Bootstrap. Pensé que crear un menú receptivo sería sencillo, pero me encuentro con un problema en el que he creado una barra de navegación receptiva usando Bootstrap 4 que aparece de la siguiente manera:

Cuando se cambia el tamaño, ahora aparece de la siguiente manera:

Pero cuando hago clic en el menú desplegable, aparece de la siguiente manera:

Me gustaría que el botón permanezca en su posición a la derecha y no sea arrastrado al menú. Realmente confundido de por qué esto está sucediendo. El código para esto es:

<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">

  <a class="navbar-brand" href="#">Brand</a>

  <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
                <span class="navbar-toggler-icon"></span>
            </button>

  <div class="collapse navbar-collapse ml-auto justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
    </ul>
  </div>
  <a class="btn btn-outline-info" href="#">Button</a>

</nav>

¡Agradezco la ayuda!