Я использовал класс "order-md-last", чтобы держать бренд navbar вправо, когда пользователь находится на рабочем столе или в мобильном окне. Однако, когда есть средний видовой экран, бренд navbar падает под переключателем каждый раз, когда он переключается.
По какой-то причине торговая марка navbar не падает под переключателем, когда пользователь находится на небольшом устройстве просмотра.
Я пытался использовать mr-auto, ml-auto и order-n, но он либо не держится вправо в режиме рабочего стола, либо просто падает под переключателем.
https://jsfiddle.net/0uoL8x6e/1/
<nav class="navbar navbar-expand-lg navbar-light">
<div class="navbar-header">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon">
</span>
</button>
</div>
<ul class="navbar-brand order-md-last" style="margin-top: 5px;">
<img src="logo.png" class="centered-navbar-image" width="75" />
<h1 class="navbar-brand">brand 1</h1>
<h1 class="navbar-brand">brand 2</h1>
</ul>
<div class="collapse navbar-collapse ml-auto" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="about_us.html" class="nav-link">About Us</a>
</li>
<li class="nav-item">
<a href="contact_us.html" class="nav-link">Contact Us</a>
</li>
<li class="nav-item">
<a href="services.html" class="nav-link">Products</a>
</li>
</ul>
</div>
</nav>
Так выглядит панель навигации в окне просмотра md.
https://imgur.com/sPZQNGY
Вот так это выглядит при переключении.
https://imgur.com/ODUuf05
Так выглядит переключаемая навигационная панель в sm-viewport
https://imgur.com/Qqx52OM
Edit: 1029 **
Исправлено это с помощью «order-lg-last» вместо «order-md-last».