Bootstrap中列排序的重点是什么？

Question

在Bootstrap 3文档中，他们提供了以下列排序示例：https://getbootstrap.com/docs/3.3/css/#grid-column-ordering

<div class="row">
   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

为什么不将此定义为：

<div class="row">
   <div class="col-md-9">.col-md-9</div>
   <div class="col-md-3">.col-md-3</div>
</div>

或者必须采用相反的方式：

<div class="row">
   <div class="col-md-3">.col-md-3</div>
   <div class="col-md-9">.col-md-9</div>
</div>

这就像定义错误的方式＆＃34;然后重写它以获得＆＃34;正确的方式＆＃34;除非我误解了这个？

Answer 1

列排序用于创建不同的响应式布局。取一个look at this demo并调整视口宽度。您可以根据屏幕宽度使用排序来切换布局。

更大的屏幕：

较小（移动）屏幕：

所以我们希望左侧的侧边栏位于大屏幕上，但我们希望主要内容首先位于移动屏幕上。这是一个比较常见的用例，但有很多。

由于Bootstrap是＆＃34;移动优先＆＃34;，默认网格层是最小（xs）层。当标记没有指定xs列大小时，列将在移动屏幕上垂直堆叠。列将以自然顺序堆叠。因此，应始终为最小屏幕的布局设置标记，然后使用推/拉类调整布局以获得更大的屏幕宽度。

More on column ordering