如何调整Bootstrap 3移动端列顺序：移动端LastName排第2，桌面端排最后

嘿，这个需求用Bootstrap 3的列推拉特性就能完美解决！我给你写了完整的可运行代码，顺便把你代码里的小拼写错误（clas应该是class）也修正了，一起来看：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <!-- 第一列：First Name，两端布局位置一致 -->
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">First Name</div>
      </div>
    </div>

    <!-- Last Name列：移动端第2位，桌面端最后 -->
    <div class="col-md-3 col-sm-6 col-md-push-6">
      <div class="panel panel-default">
        <div class="panel-heading">Last Name</div>
      </div>
    </div>

    <!-- 其他内容列：移动端第3位，桌面端第2位 -->
    <div class="col-md-6 col-sm-12 col-md-pull-3">
      <div class="panel panel-default">
        <div class="panel-heading">Other Content (e.g. Email, Phone)</div>
      </div>
    </div>
  </div>
</div>

原理说明： #

• 移动端（屏幕宽度<768px，对应sm断点）：我们直接按「First Name → Last Name → 其他内容」的顺序编写列，col-sm-6让前两列各占一半宽度，第三列占满整行，完全符合你的需求。
• 桌面端（屏幕宽度≥992px，对应md断点）：
  • 给Last Name列添加col-md-push-6，把它向右推6个列的宽度（刚好到最右侧）；
  • 给其他内容列添加col-md-pull-3，把它向左拉3个列的宽度，填补Last Name原来的位置，这样就实现了「First Name → 其他内容 → Last Name」的桌面端顺序。

另外注意下Bootstrap的网格系统是12列布局，所有列的宽度加起来要等于12，这样布局才不会错乱哦！

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