Bootstrap 4 一个引导4导航栏上有多个断点

我正在寻找一种在BS4导航栏中使用2个不同断点的方法。许多菜单项应始终折叠，而不同的菜单项仅在-sm屏幕上折叠。因此，在下面的示例中，选项4-6应始终折叠，选项1-3应在大于-sm的屏幕上可见，并且在-sm屏幕上折叠到同一个触发器中。这两个部分应该右对齐，彼此相邻

在大屏幕上应该是这样的：

就像在小屏幕上这样：

我到处找了，但似乎找不到解决办法。我曾尝试组合两个固定顶部导航栏，但在单击切换器时会给出重叠的结果。我曾经玩过“.navbar-collapse-sm”和类似的类，但这也不起作用

---

那么这可能吗？任何帮助或提示都将不胜感激。

需要一些自定义CSS来控制#navbar1

@media (min-width: 576px) {
    #navbar1 {
        display: flex !important;
        flex-basis: auto;
    }

    /* prevent flicker during toggle */
    #navbar1.collapsing {
        transition: none;
        height: auto;
    }

    #navbar1 .navbar-nav {
        flex-direction: row;
    }
}

以及对导航栏标记的一些更改：

<nav class="navbar bg-dark navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler order-sm-1" type="button" data-toggle="collapse" data-target=".navbars">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse order-sm-0 navbars" id="navbar1">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 1</a> </li>
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 2</a> </li>
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 3</a> </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse navbars order-last" id="navbar2">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="#">Option 4</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 5</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 6</a> </li>
            </ul>
        </div>
    </div>
</nav>

演示：

<nav class="navbar bg-dark navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler order-sm-1" type="button" data-toggle="collapse" data-target=".navbars">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse order-sm-0 navbars" id="navbar1">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 1</a> </li>
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 2</a> </li>
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 3</a> </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse navbars order-last" id="navbar2">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="#">Option 4</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 5</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 6</a> </li>
            </ul>
        </div>
    </div>
</nav>