Bootstrap仅移动端交换col-lg-6列顺序的实现方案咨询

不需要重复渲染按钮，直接通过调整HTML结构结合Bootstrap的col-lg-pull-*和col-lg-push-*类就能实现需求：

• 调整HTML结构，把按钮列放在文本列的前面，小屏幕下按钮自然在上、文本在下
• 给文本列添加col-lg-pull-6，让它在大屏（lg）下向左移动6个列宽的位置
• 给按钮列添加col-lg-push-6，让它在大屏下向右移动6个列宽的位置

这样既保留大屏的原有布局，又满足移动端的顺序需求，完全不需要重复元素。

修改后的代码示例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="row">
  <div class="col-md-6">
    <form>
      <div class="row">
        <!-- 按钮列前置，小屏幕自动在上 -->
        <div class="col-lg-6 col-lg-push-6">
          <button type="submit">Submit</button>
        </div>
        
        <!-- 文本列后置，通过pull类调整到大屏左侧 -->
        <div class="col-lg-6 col-lg-pull-6">
          <div class="form-group">
            asd
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

原理说明 #

Bootstrap 3采用移动优先的栅格逻辑，小屏幕下列会按HTML自然顺序堆叠。col-lg-push-6和col-lg-pull-6仅在大屏（≥1200px）生效，通过CSS的left/right属性交换两个列的显示位置，而HTML结构本身的顺序不变，刚好匹配移动端的堆叠需求。

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