Css 推/拉类在网格系统中做什么？

当我看到很多CSS网格系统和框架时，它们通常都有一个标准的列和行设置，并带有百分比宽度。比如说：

标准网格列：

.col-10 {
  width: 83.33333%;
  width: calc(100% / 12 * 10);
  width: -webkit-calc(100% / 12 * 10);
  width: -moz-calc(100% / 12 * 10); }

.push-10 {
  left: 83.33333%;
  left: calc(100% / 12 * 10);
  left: -webkit-calc(100% / 12 * 10);
  left: -moz-calc(100% / 12 * 10); }

.pull-10 {
  left: -83.33333%;
  left: calc(-100% / 12 * 10);
  left: -webkit-calc(-100% / 12 * 10);
  left: -moz-calc(-100% / 12 * 10); }

然而，除此之外，我经常看到其他类，如

.push

或

.pull

。例如：

.push-10 {
    left: calc(100% / 12 * 10);
}

推拉类：

.col-10 {
  width: 83.33333%;
  width: calc(100% / 12 * 10);
  width: -webkit-calc(100% / 12 * 10);
  width: -moz-calc(100% / 12 * 10); }

.push-10 {
  left: 83.33333%;
  left: calc(100% / 12 * 10);
  left: -webkit-calc(100% / 12 * 10);
  left: -moz-calc(100% / 12 * 10); }

.pull-10 {
  left: -83.33333%;
  left: calc(-100% / 12 * 10);
  left: -webkit-calc(-100% / 12 * 10);
  left: -moz-calc(-100% / 12 * 10); }

我经常使用网格系统，但我从来不需要使用这些类。可能是因为我不知道他们在干什么。因此，我的问题是：

推送课通常做什么

pull类通常做什么

您希望在什么时候使用它们

你如何使用它们

提供一个小提琴的例子来演示

---

它们用于重新排序内容。假设您希望内容在HTML标记中排在第一位，然后是侧边栏，但是您希望侧边栏在显示中排在第一位（在左侧），然后是内容（在右侧）

以引导为例：

<div class="row">
    <div class="col-md-9 col-md-push-3">This is content that comes <strong>first in the markup</strong>, but looks like it comes second in the view.</div>
    <div class="col-md-3 col-md-pull-9">This is the sidebar, that comes <strong>second in the markup</strong>, but looks like it comes first in the view.</div>
</div>

也就是说，取容器的宽度（100%），除以网格中的列数（12），再乘以要推送的列数（10）。留给你的是83.33333%