如何让navbar brand居中且导航链接分布两侧，md断点下隐藏到汉堡菜单

以下为可直接运行的完整代码，完美匹配需求：

<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
  <div class="container d-flex align-items-center">
    <!-- 左侧导航链接：md断点以上显示在品牌左侧 -->
    <ul class="navbar-nav order-md-1 d-none d-md-flex">
      <li class="nav-item px-5">
        <a href="#python" class="nav-link text-white"><h2>Python</h2></a>
      </li>
    </ul>

    <!-- 品牌标识：所有屏幕尺寸下始终居中 -->
    <a class="navbar-brand mx-auto order-1 order-md-2" href="#">
      <h2>Name</h2>
    </a>

    <!-- 汉堡触发按钮：md断点以下显示在右上角 -->
    <button class="navbar-toggler order-2 order-md-3" type="button" data-bs-toggle="collapse" data-bs-target="#burger">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 折叠菜单容器：md断点以下收纳所有导航链接 -->
    <div class="collapse navbar-collapse order-3" id="burger">
      <ul class="navbar-nav text-center w-100">
        <li class="nav-item px-5">
          <a href="#python" class="nav-link text-white"><h2>Python</h2></a>
        </li>
        <li class="nav-item px-5">
          <a href="#html&css" class="nav-link text-white"><h2>Html&Css</h2></a>
        </li>
      </ul>
    </div>

    <!-- 右侧导航链接：md断点以上显示在品牌右侧 -->
    <ul class="navbar-nav order-md-4 d-none d-md-flex">
      <li class="nav-item px-5">
        <a href="#html&css" class="nav-link text-white"><h2>Html&Css</h2></a>
      </li>
    </ul>
  </div>
</nav>

实现逻辑说明 #

• 用Bootstrap内置的order-*响应式顺序类控制元素在不同断点下的排列优先级，确保品牌始终在小屏幕的最上方居中位置
• md断点以上单独展示左右两个导航列表，分别排布在品牌两侧，折叠菜单内的导航项默认隐藏
• md断点以下隐藏外部的左右导航列表，所有导航项收纳在汉堡菜单内，展开后居中展示
• 品牌元素通过mx-auto实现自动左右居中，无需额外自定义CSS

内容的提问来源于stack exchange，提问作者memento