Bootstrap 4 让品牌和汉堡在xs视图中左对齐、右对齐，而不是居中对齐

我有以下菜单：

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
  rel="stylesheet">
            <nav class="navbar navbar-expand-md navbar-dark bg-dark">
                <div class="container">
                <div class="navbar-collapse w-100 order-1 order-md-0 dual-collapse2 collapse" style="">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">menu item</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">menu item</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">menu item</a>
                        </li>
                    </ul>
                </div>


                <div class="mx-auto order-0 mobiler">
                    <a class="navbar-brand mx-auto" href="#">brand</a>
                    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target=".dual-collapse2" aria-expanded="false">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
                <div class="navbar-collapse w-100 order-3 dual-collapse2 collapse" style="">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">menu item</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">menu item</a>
                        </li>
                    </ul>
                </div>
                </div>
            </nav>

使用Bootstrap 4，我创建左菜单，右菜单和品牌（在移动中，汉堡包）在中间。唉，在mobilexs视图中，这两个视图都居中，我希望它们显示在左侧和右侧

我试着玩媒体查询，但我总是搞砸我的格式。

---

请帮助

尝试使用引导4：

.navbar品牌{
位置：绝对位置；
}
/*移动视图的媒体查询*/
@介质（最大宽度：575px）{
.navbar品牌{
右：10px；
顶部：10px；
}

为什么代码片段中包含引导程序3？