如何对导航栏中的元素进行分组，以便它们堆叠为一个单元以进行响应式缩放

问：

我有一个包含四个元素的导航栏：徽标、组织名称、主页按钮和下拉按钮

我想将它们分为两组 [ 徽标 + 组织名称 ] 和 [ 主页 + 下拉列表 ] 因此，当屏幕尺寸变得太小时，它们会垂直堆叠成两行。目前，这些按钮在移动到徽标和组织名称下之前会垂直堆叠。

[ logo + Org name ]
[ home ]
[ dropdown ]

法典：

    <nav class="navbar navbar-expand-sm bg-body-tertiary">
        <div class="container-fluid d-flex justify-content-between align-items-center">
          <div class="d-flex order-0 order-sm-0 align-items-center">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="navbar-brand"   <!--##logo##-->
              </li>
            </ul>
            <ul class="navbar-nav navbarMiddle">
              <li class="nav-item">
                  <a class="nav-link active"   <!--##Org Name##-->
              </li>
            </ul>
          </div>
          <div class="d-flex order-1 order-sm-1 align-items-center">
            <ul class="navbar-nav">
              <li class="nav-item">
                 <a class="nav-link"   <!--##Home Button##-->
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle"   <!--##Dropdown Button##-->
                  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark">
                    <li><a class="dropdown-item"

我试图将 ul 包装在具有不同属性的 spans 和 div 标签中，但没有奏效。 使用表是有效的，但会破坏下拉列表的功能。 我知道这是由 flexbox 行为引起的，其中 Bootstrap scss 更改了flex-direction: row @media (min-width: 576px)

任何帮助将不胜感激。