Как переместить элементы навигационной панели справа

Я использую классы начальной загрузки, и мне нужно, чтобы логотип был слева, а элементы навигации - справа. Так же быть отзывчивым.

https://imgur.com/zL8LrTGпанель навигации сейчас

       <!-- Logo -->
       <a class = "navbar-brand" href = "#">
           <img class = "img-fluid" src = "images/header-logo.png" alt = "logo">
       </a>

       <!-- Toggler/collapsibe Button -->
       <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#collapsibleNavbar">
           <span class = "navbar-toggler-icon"></span>
       </button>

       <!-- Nav items -->
       <div class = "collapse navbar-collapse" id = "collapsibleNavbar"> <!-- Collapse navbar -->
           <ul class = "navbar-nav">
               <li class = "nav-item">
                   <a class = "nav-link" href = "#">Home</a>
               </li>
               <li class = "nav-item">
                   <a class = "nav-link" href = "#">Products</a>
               </li>
               <li class = "nav-item">
                   <a class = "nav-link" href = "#">Services</a>
               </li>
               <li class = "nav-item">
                   <a class = "nav-link" href = "#">Contact</a>
               </li>
           </ul>
       </div>
   </nav>