Поместите переключатель языка внутри .navbar-item, сразу после .navbar-brand и присвойте ему order: 1 (что больше, чем значение по умолчанию 0 - так что он будет отображаться как последний элемент его родителя ) на интервале, в котором ваш .navbar не свернут. Поскольку вы используете .navbar-expand-lg, это будет @media (min-width: 992px), но если бы вы использовали .navbar-expand-md, это было бы min-width: 768px - или 576px для -sm. Подробнее о отзывчивых точках останова здесь .
Когда навигация свернута, вам не нужно менять порядок, поэтому переключатель языка отображается перед меню (по этой причине мы разместили его после lo go в первую очередь). Посмотрите, как это работает:
.logo {
max-width: 130px;
}
.btn {
font-family: 'Muli', sans-serif;
font-weight: 900;
}
.btn {
background: rgb(142, 63, 41);
color: rgb(202, 171, 159);
}
.active {
background: rgb(166, 73, 47);
color: white;
}
@media(min-width: 992px) {
.language-switch {
order: 1;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mt-lg-0" href="#"><img src="https://via.placeholder.com/200x50" class="logo img-fluid"></a>
<div class="nav-item language-switch">
<div class="btn-group btn-toggle lang mr-1">
<input type="button" name="lang" class="btn" value="ENG">
<input type="button" name="lang" class="btn active" value="SPA">
</div>
</div>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">PURPOSE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAMILY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">AGRICULTURE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ART</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
О, и вам нужно придумать решение о том, как выровнять три (lo go, переключение языка и переключение), когда они не на самом деле помещается в одну строку (устройства уже ~ 450px). Но это та проблема, о которой вы в основном просили.
Примечание: если вы хотите, чтобы lo go отображался первым при сворачивании navbar, вы можете просто поместить его перед переключателем и назначить переключателю либо ml-auto mr-3 или ml-3 mr-auto, чтобы заставить его придерживаться правой или левой стороны (центрирование было бы странно, ИМХО). Пример:
.logo {
max-width: 130px;
}
.btn {
font-family: 'Muli', sans-serif;
font-weight: 900;
}
.btn {
background: rgb(142, 63, 41);
color: rgb(202, 171, 159);
}
.active {
background: rgb(166, 73, 47);
color: white;
}
@media(min-width: 992px) {
.language-switch {
order: 1;
}
}
Тот же результат может быть достигнут при использовании order: -1 на lo go (без переключения его места в DOM с помощью переключателя) на правильном ответе интервал (то есть: ниже 991px в вашем случае).