如何在移动端和平板端调整Bootstrap按钮的显示顺序？

现有以下Bootstrap 4代码片段：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 pt-2 d-flex flex-column flex-md-row justify-content-md-end">
      <button type="button" class="btn btn-secondary mb-2 mb-md-0 mr-md-2">Back</button>
      <button type="button" class="btn btn-primary">Next</button>          
    </div>
  </div>
</div>

这段代码在小屏设备上按钮会占满整个宽度，符合预期，但希望小屏设备上Next按钮显示在Back按钮上方，询问是否可以实现。

可以通过调整Bootstrap的flex布局类和按钮的margin类实现需求，修改后的代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 pt-2 d-flex flex-column-reverse flex-md-row justify-content-md-end">
      <button type="button" class="btn btn-secondary mb-md-0 mr-md-2">Back</button>
      <button type="button" class="btn btn-primary mb-2 mb-md-0">Next</button>          
    </div>
  </div>
</div>

修改说明： #

• 将容器的flex-column替换为flex-column-reverse：小屏设备下flex容器会反向排列子元素，让Next按钮显示在Back按钮上方，同时保留按钮占满宽度的特性。
• 调整按钮的margin类：
  • 移除Back按钮的mb-2，小屏下它处于下方，无需底部外边距。
  • 给Next按钮添加mb-2 mb-md-0：小屏下Next在上方，需要底部外边距和Back按钮隔开；大屏切换为行布局时，移除底部外边距避免多余间距。
  • 保留Back按钮的mr-md-2：大屏下Back按钮在左侧，需要右侧外边距和Next按钮隔开。

修改后，小屏设备上Next按钮在Back按钮上方且两者都占满宽度，大屏设备上Back和Next按钮在右侧横向排列，完全符合需求。

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