Bootstrap 響應式列重排：push/pull (v3) 與 order (v4/v5) 類實現斷點重序

Bootstrap 3：push / pull

<div class="row">
  <div class="col-sm-6 col-sm-push-6">內容 1（大屏右，小屏左）</div>
  <div class="col-sm-6 col-sm-pull-6">內容 2（大屏左，小屏右）</div>
</div>

• col-sm-push-6：向右推 6 列（相對原位）。
• col-sm-pull-6：向左拉 6 列。
• 配合 col-md-*、col-lg-* 實現多斷點重排。

Bootstrap 4/5：Flex order

<div class="row">
  <div class="col-6 order-2 order-sm-1">內容 1</div>
  <div class="col-6 order-1 order-sm-2">內容 2</div>
</div>

• order-* 直接控制 Flex 容器中項目順序（0~12）。
• 響應式類 order-sm-*、order-md-* 覆蓋不同斷點。
• JS 動態切換：element.classList.replace('order-1', 'order-2')。

選擇建議

新項目直接用 Bootstrap 5 Flex order，語義清晰、無浮動副作用、支持垂直排列。維護 v3 老項目才用 push/pull。|