现在， 页面上显示的两块内容，主体还有边栏，会堆叠在一起 ... 下面，我们去在它们上面添加两个网格类，排列一下它们的显示 ...

回到编辑器 ... 在主体上，添加一个 col-md-9 ，意思就是，让这块内容，在一般尺寸的桌面电脑设备上占用 9 个网格的宽度 ..

然后在边栏上，添加一个 col-md-3 ...

保存 ... 回到浏览器 ... 现在， 页面分成两栏显示，左边是主体内容占用 9 个网格的宽度，右边是 边栏，占用 3 个网格的宽度 ... 假设现在，我们想在不改变代码的结构的情况下，去让边栏这块内容显示在左边，让主体内容显示在右边 ... 这个时候，我们就可以使用 Bootstrap 提供的 push 还有 pull 类型的 css 类。 把元素向右推，还有向左拉 ...

回到编辑器 ... 在这个主体部分上面，添加一个 col-md-push-3 .... 注意这个类是 col-md 开头的 ... 就表示说，这个类会用在一般尺寸的桌面电脑设备上，也就是窗口的宽度大于等于 992 像素的时候 ...

在这里用到的 push 类要跟在这个元素上使用的网格类相对应，因为网格类，用到也是 col-md 类型的，所以，这里也就要使用 col-md 类型的 push 类。

col-md-push-3 ，它的意思就是，在中等尺寸的设备上，把主体这块内容向右推 3 个网格的宽度 ... 这样在它的左边，就会留个 3 个网格的空间。我们可以在边栏上，去添加一个 pull 类型的 css 类，把边栏向左拉 ...

找到边栏 ... 在上面添加一个 col-md-pull-9 ... 因为边栏这块内容，向左拉 9 个网格的宽度，才能让它正好在主体内容的左边留出来的这块空间上显示 ...

保存 ...

回到浏览器 ... 注意主体还有边栏的位置的变化 ... 刷新一下 ..

你会看到，边栏会跑到左边来显示 ... 占用 3 个网格的宽度 .... 主体内容会在右边显示 ... 占用 9 个网格的宽度 ...

我们并没有改变页面的代码的结构 ... 主体内容的代码仍然是在边栏代码的上面 .... 通过在元素上面添加 push ，还有 pull 类型的 css 类，可以改变内容的显示 ...

使用这种方法的主要原因可能是 SEO ，搜索引擎优化 ... 因为搜索引擎会认为主要的内容会在页面的上方显示，所以，主体内容的代码放在了边栏代码的上面 ...