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

当我查看很多 CSS 网格系统和框架时，它们通常有一个带有百分比宽度的标准列和行设置。例如这样的事情：

标准网格列：

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

然而，除此之外，我还经常看到其他课程，例如.push or .pull。例如这样：

推/拉类：

.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); }

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

1. 推送课通常做什么？
2. 拉班通常做什么？
3. 您什么时候想使用它们？
4. 你如何使用它们？
5. 提供一个小提琴示例来演示。

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

以 Bootstrap 为例：

<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>

The col-sm-push-3表示将列从左侧移动 25% (left: 25%).

The col-sm-pull-9表示将列从右侧移动 75% (right: 75%).

因此，在这种情况下，大列被“推”小列的宽度，小列被“拉”大列的宽度。

使用 Bootstrap 进行演示 http://jsfiddle.net/davidpauljunior/ECvR5/

像这样的事情：

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

意思是，取容器的宽度 (100%)，将其除以网格中的列数 (12)，然后乘以要推送的数字 (10)。留给你 83.33333333%。