Я пытаюсь создать систему меню, предназначенную для XL, LG, MD, SM, но с другим видом XS (mobile) в BOOTSTRAP4.
У меня есть следующее HTML:
<div class="container-fluid">
<div class="d-flex">
<div class="mr-auto">
<ul id='menu'>
<li class="mt-1">
<a href="#goto-list-books" class="nav-link open-popup"><span class="fas fa-th fa-lg"></span></a>
</li>
<li class="mt-1">
<a href="/" class="nav-link">Menu 1</a>
</li>
<li class="mt-1">
<a href="/" class="nav-link">Menu 1</a>
</li>
</ul>
</div>
<div class="d-flex">
<div class="">
<button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'><i class="fas fa-sign-in-alt mr5"></i>Login
</button>
</div>
<div class="">
<form class="form-inline mr-1" action='/search' method='POST'>
<div class="input-group input-group-sm mx-auto">
<input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
<div class="input-group-append">
<button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
</div>
</div>
</form>
</div>
<div class="">
<div class="dropdown">
<button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
</div>
</div>
</div>
</div>
</div>
</div>
Что может быть найдено в JSFiddle.
Это прекрасно работает на больших экранах, но на XS просто сжимает все вместе и выглядит ужасно. Я хочу, чтобы две разные стороны go находились в двух разных строках, но когда я добавляю строки> классы col, это сводит на нет утилиты flexbox. Как мне этого добиться?
Это макет, который мне нужен для больших дисплеев:
Какой код, приведенный выше, работает нормально. Но для XS я хочу эту раскладку: 
, которую я просто не могу заставить работать. Прямо сейчас я только что создал два совершенно разных элемента меню, один из которых отображается на XS, а другой - для остальных, так как я не могу заставить bootstrap4 делать то, что я хочу.
Пожалуйста, если кто-нибудь знает, как получить пожалуйста, помогите и покажите мне логин, поиск и выпадающий список в своей строке в приведенном выше коде.