Bootstrap 框架中列排序 Push 与 Pull Bootstrap 3 布局优缺点

Bootstrap 3 的 push/pull 类仅支持同一行内两列互换，因其基于 float 布局，通过 left/right 偏移实现视觉挪位，要求两列数值之和为12，且最大偏移为11；不支持三列重排，亦不兼容 Bootstrap 4+ 的 flex order 机制。

Bootstrap 3 的 push 和 pull 类只能交换同一行内、总宽为 12 的两列顺序，不支持三列及以上重排，也不兼容 Bootstrap 4+。

为什么 col-md-push-* 和 col-md-pull-* 只能换两列位置

Bootstrap 3 网格依赖 float: left 实现布局，push 和 pull 本质是通过 left 或 right 的 CSS 偏移强行“视觉挪位”，而非改变 DOM 顺序或 flex 排序。因此：

• 必须在同一 <div class="row"> 内操作，跨行无效
• 两列的 col-*-* 数值之和必须等于 12（例如 col-md-8 + col-md-4），否则偏移后会错位甚至重叠
• 若写 col-md-push-4 但该列本身占 5 列，实际向右移动 4 列后，剩余空间不足，右侧内容会被挤出视口或覆盖
• 没有 col-md-push-12 这种写法——最大有效值是 11，因为列宽至少为 1

push/pull 和 offset 的关键区别在哪

表面都是“让列挪位置”，但底层机制和副作用完全不同：

• offset（如 col-md-offset-3）用 margin-left 推动整列及其后续所有元素，安全但死板；它不会重叠，超限会自动换行
• push/pull 用 float + left/right，只动当前列，其他列完全不受影响——这既是灵活性来源，也是坑的起点
• 典型翻车场景：col-md-6 col-md-push-6 把一列推到最右，但若同行还有另一列没设 pull，它仍按原顺序渲染在左，结果两列视觉重叠
• 响应式断点不匹配时（比如只在 md 设了 push，但 sm 下没重置），小屏下可能残留错位

在真实项目中哪些场景还能用，哪些该立刻放弃

不是不能用，而是得清楚边界：

• ✅ 适合：PC 端侧边栏与主内容互换（main 在 HTML 后但需视觉前置，aside 在 HTML 前但需视觉后置），且二者加起来刚好 12 列
• ✅ 适合：移动端保持上下顺序（如图在上、文在下），桌面端改为左右并排并交换左右位置
• ❌ 不适合：一行三列（如 col-md-4×3）想调成 B-A-C 或 C-B-A——Bootstrap 3 原生不支持，硬套 push/pull 必然错行或溢出
• ❌ 不适合：需要语义化顺序（如 SEO、可访问性）与视觉顺序一致的场景——push/pull 只改样式，DOM 顺序不变
• ⚠️ 注意：Bootstrap 4 已废弃 push/pull，改用 order（flexbox），升级项目时这些类会直接失效

真正容易被忽略的是：哪怕你只在 lg 断点用了 col-lg-push-3，也得同步检查 md 和 sm 下是否需要 col-md-pull-0 或类似重置——否则小屏回退时偏移量残留，列就飘了。