我是Bootstrap的新手，通常对代码进行编码，并对折叠的导航栏切换开关有疑问。在sm和xs屏幕上，我希望切换按钮堆叠在标题中的搜索图标下方，以便徽标位于左侧，图标位于右侧。
我想到的唯一方法是将导航栏与标头元素移到同一行，但是当我这样做时，它会将导航栏保留在搜索图标容器中，而不是将其放在自己的下面div。有没有一种方法可以将导航栏div堆叠在搜索图标div下，同时将它们保持在单独的div中？
这就是我现在在Code Pen上所拥有的：https://codepen.io/SuperCrunchy/pen/ZwxvYr。请原谅大屏幕上不存在的社交图标！
<header>
<div class="container-fluid">
<div class="container" id="header-container">
<div class="row">
<div class="col-9 col-md-6 d-flex justify-content-md-center align-items-start">
<img src="http://www.laingsuk.com/blog/wp-content/uploads/2014/06/DIAMOND.jpg" class="col-10 col-sm-7 col-md-10 col-lg-7 p-0 pr-md-2 pl-md-2">
</div>
<div class="col-3 d-flex align-items-start justify-content-end">
<div class="search-container">
<span class="icon pr-md-2"><i class="fa fa-search"></i></span><input type="search" id="search" placeholder="Search..." class="search-container">
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-light d-flex justify-content-end">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
家（当前） 耳环 吊坠 男士饰品 宗教饰品 快速商店