Css 引导4导航对齐图标故障

我很难让搜索和购物车的“图标”在手机上对齐。图标应该在桌面菜单的右侧，就像它们一样

然而，我想把图标放在汉堡包左边的响应状态上。还希望使用BS4提供的CSS实用程序

有什么想法吗？提前谢谢

主页

引导4导航栏是flexbox，因此您可以使用来根据需要进行调整

<div class="container text-uppercase">
    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand my-4" href="#"><img src="https://placehold.it/200x100"></a>
        <button class="navbar-toggler navbar-toggler-right order-lg-0 order-1" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="d-flex justify-content-end order-lg-2 order-0">
            <i class="fas fa-fw fa-search"></i>
            <i class="fas fa-fw fa-shopping-cart"></i>
        </div>
        <div class="collapse navbar-collapse justify-content-end order-lg-1 order-last" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
            </ul>
        </div>
    </nav>
</div>

---

相关：

谢谢，我已经试过了。不幸的是，汉堡包并没有保持在顶部…当你点击它时，它会飘落下来。很好！不管怎样，你可以把图标放在汉堡包旁边，而不是在中间。我想你的问题已经得到解答。你需要再玩几次才能得到你想要的。通常，

ml auto

可用于向右推送项目：