移动端单行布局下交换Bootstrap3列顺序且不堆叠的方法

当前代码无法生效有两个核心问题：

• Bootstrap 3 没有内置col-*-order-*排序类，这类基于Flex布局的排序工具是Bootstrap 4及以上版本才提供的，直接在v3中书写不会生效
• 列宽配置不符合单行要求：lg断点下Logo和Menu各占6列，总宽度已经占满12份栅格，你给Button添加的hidden-lg会导致按钮在大屏直接隐藏，无法实现三列全端可见、单行排列的效果

Bootstrap 3 原生提供push/pull偏移类实现列排序，配合正确的列宽配置即可完全满足需求。

<!-- Bootstrap 3.3.7 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-xs-4 col-sm-push-4">
            Menu
        </div>
        <div class="col-xs-4 col-sm-pull-4">
            Logo
        </div>
        <div class="col-xs-4">
            Button
        </div>
    </div>
</div>

• 所有列统一添加col-xs-4类，保证从手机端到桌面端的所有断点下，每列占据4份栅格宽度，三列总宽度刚好为12份，永远保持单行排列，不会出现堆叠
• 基于Bootstrap 3的响应式规则，col-sm-*类仅在屏幕宽度≥768px（平板、桌面端）时生效：
  • 给Menu列添加col-sm-push-4，在平板/桌面端将其向右偏移4列宽度
  • 给Logo列添加col-sm-pull-4，在平板/桌面端将其向左偏移4列宽度
    二者刚好交换位置，实现平板/桌面端Logo Menu Button的默认顺序
• 手机端（屏幕宽度<768px）时push/pull类不生效，元素按照HTML书写顺序排列，刚好呈现Menu Logo Button的移动端要求

如果需要调整桌面端各列的宽度占比，只要保证同一断点下三列宽度总和为12，对应调整push/pull的偏移列数即可。

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