Bootstrap 4折叠状态导航栏列表顺序修改问题（Bootstrap3方法无效）

嘿，我懂你现在的困扰——之前Bootstrap 3那套列重排的方法在Bootstrap 4/5里完全不适用，尤其是你要调整折叠状态下导航栏的元素顺序对吧？我给你几个实用的解决方案，都是针对Bootstrap 4+版本的：

Bootstrap 4及以后的版本全面采用Flexbox布局，所以我们可以直接利用CSS的order属性（或Bootstrap 5的内置工具类）来控制小屏幕下元素的显示顺序，完全不需要依赖Bootstrap 3的col-push/pull类。

情况1：自定义CSS适配Bootstrap 4/5 #

首先给需要调整顺序的导航元素加上自定义类，方便我们精准控制：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand custom-brand" href="#">Website Name</a>
  <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse custom-collapse" id="navbarSupportedContent">
    <!-- 你的导航链接、下拉菜单等内容 -->
  </div>
</nav>

然后通过媒体查询，针对折叠状态的小屏幕（对应navbar-expand-lg的断点，即小于992px的屏幕）调整元素顺序：

/* 在折叠状态下调整导航元素顺序 */
@media (max-width: 991.98px) {
  .custom-brand {
    order: 2; /* 品牌名称排第二位 */
  }
  .custom-toggler {
    order: 1; /* 汉堡按钮排第一位 */
  }
  .custom-collapse {
    order: 3; /* 展开后的菜单排第三位 */
  }
}

你可以根据需求修改order的数值，数值越小越靠前。

情况2：用Bootstrap 5内置工具类快速实现 #

Bootstrap 5自带了响应式的order-*工具类，不用写自定义CSS就能搞定：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand order-2 order-lg-1" href="#">Website Name</a>
  <button class="navbar-toggler order-1 order-lg-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse order-3" id="navbarSupportedContent">
    <!-- 你的导航内容 -->
  </div>
</nav>

这里order-1是小屏幕下的顺序，order-lg-1是大屏幕（lg及以上）下的顺序，完美实现不同尺寸下的布局切换。

为什么Bootstrap 3的方法失效？ #

Bootstrap 3依赖浮动布局实现列顺序调整，而Bootstrap 4+全面切换到Flexbox布局，浮动相关的col-push/pull类自然就不再生效，Flex的order属性是更适配当前版本的解决方案。

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