Bootstrap 4.x在中等断点处的导航栏下拉菜单，在较大断点处扩展

Question

使用Bootstrap 4.1，我构建了一个导航栏，当屏幕小于中等宽度时，导航栏会折叠，大致如下：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="d-flex flex-nowrap flex-fill minw-0">
        <a class="app-link navbar-brand text-truncate mr-auto mt-auto mb-auto" href="../"><img class="app-logo mt-auto mb-auto align-middle" src="applogo.svg">Test</a>
        <button class="navbar-toggler my-auto ml-auto" aria-expanded="false" aria-controls="navbarCollapse" aria-label="Toggle navigation" type="button" data-toggle="collapse" data-target=".navbar-collapse.sample3">
            <span class="navbar-toggler-icon"/>
        </button>
    </div>

    <div class="collapse navbar-collapse sample3 flex-wrap d-md-inline-flex justify-content-end">
        <ul class="navbar-nav nav flex-nowrap text-nowrap">
            <li class="active nav-item"><a class="nav-link icon-mmnu-home" href="../../../"><label>Home</label></a></li>            
            ...
            <li class="nav-item flex-fill">
                <div class="input-group flex-nowrap flex-fill">
                    <input class="nav-input form-control h-auto py-1 my-0" aria-describedby="basic-addon1" aria-label="Search" type="text" placeholder="Search" />
                    <button class="btn btn-success input-group-append py-1 my-0" type="button"><i class="icon-mmnu-search small"/></button>
                </div>
            </li>
        </ul>
    </div>
</nav>

为了减少房地产，我将搜索组件更改为下拉菜单。大概是这样的：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="d-flex flex-nowrap flex-fill minw-0">
        <a class="app-link navbar-brand text-truncate mr-auto mt-auto mb-auto" href="../"><img class="app-logo mt-auto mb-auto align-middle" src="applogo.svg">Test</a>
        <button class="navbar-toggler my-auto ml-auto" aria-expanded="false" aria-controls="navbarCollapse" aria-label="Toggle navigation" type="button" data-toggle="collapse" data-target=".navbar-collapse.sample3">
            <span class="navbar-toggler-icon"/>
        </button>
    </div>

    <div class="collapse navbar-collapse sample3 flex-wrap d-md-inline-flex justify-content-end">
        <ul class="navbar-nav nav flex-nowrap text-nowrap">
            <li class="active nav-item"><a class="nav-link icon-mmnu-home" href="../../../"><label>Home</label></a></li>            
            ...
            <li class="nav-item flex-fill dropdown">
                <a class="nav-link icon-mmnu-search dropdown-toggle" id="btnSearchDropDown" aria-expanded="false" aria-haspopup="true" href="#" data-toggle="dropdown"><label>Search</label></a>
                <div class="dropdown-menu dropdown-menu-right m-0 p-0" aria-labelledby="btnSearchDropDown">
                    <div class="input-group form-group flex-nowrap p-0 px-1 m-0">
                        <input class="nav-input form-control h-auto" aria-describedby="basic-addon1" aria-label="Search" type="text" placeholder="Search">
                        <button class="btn btn-success input-group-append" type="button"><i class="icon-mmnu-search small"></i></button>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

现在，我想做的是在屏幕较大或更大时使搜索控件内联，但是当屏幕较小时，我希望搜索控件表现为下拉菜单。当整个导航栏合拢时，也可以内联显示搜索控件，而不显示下拉菜单。

最初，我认为该行为似乎是折叠组件和下拉组件的组合，但折叠不是响应组件-它没有任何断点。然后我想也许可以使用navbar-expand- *并折叠，但这意味着我实际上将把navbar-expand嵌套在父navbar-expand中，而我无法正常工作。这似乎有可能吗？