html - Bootstrap 列排序的实际用例(推、拉)

Question

在 Bootstrap 3 文档中，他们给出了以下使用 push 和 pull 类更改列顺序 (http://getbootstrap.com/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>

我明白这是如何工作的，但你为什么不直接写下你希望它们在你的 HTML 中出现的顺序，就像这样？

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

对于他们给出的示例，我看不到任何可能的用例，因为无论 order 是 col-md-3、col-md-9 还是col-md-9, col-md-3 你仍然不会在任何设备上获得更多或更少的宽度——它们加起来仍然是 12。因此为什么不直接在HTML 的顺序正确吗？

我了解这些类(class)在技术上是如何运作的。但是我不明白它们的用例可能是什么，因为它们似乎没有通过按您想要的顺序定义事物来做您已经做不到的任何事情？从本质上讲，您无法在给定设备上获得更多或更少的视口(viewport)宽度，所以您会想在哪里做这样的事情？

Answer 1

列排序类允许我们根据不同的浏览器大小更改网格系统的顺序。这意味着在大屏幕上，您可以拥有与移动屏幕上不同的网格。

例如，您可以检查一下， https://scotch.io/tutorials/reorder-css-columns-using-bootstrap