如何将响应式汉堡菜单移到屏幕右侧？

Question

我是Bootstrap的新手，并且将其用于响应式导航栏，它工作正常，除了我希望可折叠的汉堡菜单位于屏幕的右侧，而站点名称位于左侧，当前是相反的。

我尝试过mr-auto，ml-auto，向左拉，向右拉和浮动，但似乎没有任何作用。

   <button class='navbar-toggler' data-toggle='collapse' data-target='#collapse-target'>
     <span><i class="fas fa-bars"></i></span>
   </button>
   <div class='logo'>
     <h1>TC Barringer</h1>
     <h1>Photography</h1>
   </div>
   <div class='collapse navbar-collapse' id='collapse-target'>
     <ul class='navbar-nav ml-auto'>
       <li class='nav-item'><a class='nav-link' href='index.html'>PORTFOLIO</a></li>
       <li class='nav-item'><a class='nav-link' href='timandcourtney.html'>TIM & COURTNEY</a></li>
       <li class='nav-item'><a class='nav-link' href='contact.html'>CONTACT US</a></li>
     </ul>
   </div>
 </nav>

一些Bootstrap类（例如ml-auto）会稍微移动按钮，但是我尝试过的任何操作都不会完全翻转站点标题和按钮。有什么想法吗？