列排序
Bootstrap 栅格系统中一个非常人性化的特性，就是使用 .col-md-push-* 和 .col-md-pull-* 类来改变列的顺序。push 将元素向右推动 * 指定的列数，pull 将元素向左拉动 * 指定的列数，* 的取值范围是从 1 到 11。
这个特性允许你以一种顺序定义列，然后以另一种顺序显示列，是对SEO非常友好的一个特性，深受SEO人员的喜爱。
假设一个页面有左右两栏：左栏是次要内容，使用 aside 元素定义；右栏是主要内容，使用 main 元素定义。在定义HTML代码时，人们常常将主要内容的 main 元素放在前面，将次要内容的 aside 元素放在后面，这样搜索引擎首先看到的是主要内容，对搜索引擎非常友好。如：
<div class="row"><main class="col-md-9">main</main><aside class="col-md-3">aside</aside></div>
运行结果如图 2‑8所示：
图2-8 默认的列排序
显然，这不是我们想要的结果，我们希望两栏的顺序交换一下。此时，就可以使用 .col-md-push-3 将 main 元素向右推动 3 列，使用 .col-md-push-9 将 aside 元素向左拉动 9 列，很容易地让这两列的顺序互换。如：
<div class="row"><main class="col-md-9 col-md-push-3">main</main><aside class="col-md-3 col-md-pull-9">aside</aside></div>
运行结果如图 2‑9所示：
图2-9 列排序
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。