如何使用Bootstrap 4导航栏呈现2行

Question

我需要渲染以下形状的导航栏

收尾，应该看起来像这样

-----------------
| Logo        ≡ |
-----------------

我已经使用flex来容纳两行。 如何确保两行的列宽保持一致？

例如，如果左上方的“内容”宽度增加，则搜索栏将被推到右侧。

现在，第二行中的“ LINK”也应该按比例向右推，就像我们使用HTML表一样。

高度赞赏任何输入/帮助。预先感谢。

到目前为止，我的代码：https://codesandbox.io/s/zq5l3o0nj4

<nav class="navbar navbar-expand-xs navbar-light bg-light">
<div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon" />
    </button>

    <div class="collapse navbar-collapse flex-column" id="navbarSupportedContent">
        <div class="navbar--row-1 w-100 d-flex align-items-center">
            <div class="navbar--row-1--location">
                <!-- Icon -->
                <span class="ml-1 mr-1 navbar--row-1--location--label">
                    CONTENT_TOP_LEFT
                </span>
                <!-- Icon -->
            </div>
            <div class="navbar--row-1--search">
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
                </form>
            </div>

        </div>

        <ul class="navbar-nav mr-auto d-flex align-items-center">
            <li>
                <a class="navbar-brand" href="/">
                    BRAND
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link pl-0" href="/">
                    Home
                    <span class="sr-only">(current)</span>
                </a>
            </li>
        </ul>
    </div>
</div>
</nav>

这是它呈现的内容：

我无法使第二行的LINK与第一行的“搜索栏”部分对齐。