Antes de tudo, como um aviso, sou um novato completo quando se trata de Bootstrap. Eu pensei que criar um menu responsivo seria simples, mas estou enfrentando um problema no qual criei uma barra de navegação responsiva usando o bootstrap 4 que aparece da seguinte maneira:

Quando isso é redimensionado, agora aparece da seguinte maneira:

Mas quando clico no menu suspenso, ele aparece da seguinte maneira:

Gostaria que o botão ficasse na sua posição à direita e não fosse puxado para o menu. Realmente confuso sobre o porquê disso está acontecendo. O código para isso é:

<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>

Agradeço a ajuda!