如何在HTML和Bootstrap中将导航按钮移至移动端Pricing链接下方

主导航栏里的「Request demo」按钮在移动端视图下和「Customers」链接并排显示，需要把这个按钮挪到「Pricing」链接的下方。

当前使用的代码如下：

CSS 代码 #

.nav-btn button {
  background-color: white;
  color: #000000;
  border-radius: 5px;
  outline: none;
  font-size: 18px;
  font-family: AktivGrotesk-Light;
  height: 45px;
  font-weight: 500;
  transition: 0.4s ease-in-out;
}

HTML 代码 #

<div class="collapse navbar-collapse navbar" id="navbarSupportedContent">
  <ul class="navbar-nav m-auto mb-2 mb-lg-0 apri-nav">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Platform</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Apps</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Customers</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
  <form class="d-flex nav-btn">
    <button class="btn" type="submit">Request demo</button>
  </form>
</div>

方案一：调整HTML结构（推荐，适配Bootstrap响应式逻辑） #

把表单移到导航列表的最后一个nav-item里，这样移动端自然就会排在「Pricing」下方，同时通过CSS调整桌面端的位置，保留原有布局：

修改后的HTML

<div class="collapse navbar-collapse navbar" id="navbarSupportedContent">
  <ul class="navbar-nav m-auto mb-2 mb-lg-0 apri-nav">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Platform</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Apps</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Customers</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <!-- 把按钮放到导航列表最后 -->
    <li class="nav-item d-lg-flex align-items-center ms-lg-auto">
      <form class="nav-btn">
        <button class="btn" type="submit">Request demo</button>
      </form>
    </li>
  </ul>
</div>

可选CSS（微调桌面端样式）

/* 桌面端（屏幕宽度≥992px）调整按钮位置 */
@media (min-width: 992px) {
  .apri-nav {
    width: 100%;
  }
  .apri-nav .nav-item:last-child {
    margin-left: auto;
  }
}

方案二：用CSS媒体查询调整布局 #

如果不想改HTML结构，直接加媒体查询，在移动端强制让按钮换行到下方：

补充CSS

/* 移动端（屏幕宽度<992px）调整布局 */
@media (max-width: 991px) {
  #navbarSupportedContent {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-btn {
    width: 100%;
    margin-top: 1rem;
  }
}

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