Bootstrap 3 和 LESS 语义列排序答案

【问题标题】：Bootstrap 3 & LESS Semantic Column OrderingBootstrap 3 和 LESS 语义列排序
【发布时间】：2014-04-24 13:37:34
【问题描述】：

在 Bootstrap 3 中，我可以执行以下操作（用于语义标记）：

.div1 {
    .make-xs-column(12);
}
.div2 {
    .make-xs-column(12);
}

示例 HTML：

<div class="div1">
    <!-- Stuff Goes Here -->
</div>
<div class="div2">
    <!-- More Stuff Goes Here -->
</div>

在内联类定义中，我可以通过以下方式更改 div1 和 div2 的顺序：

<div class="div1 col-xs-push-12">
</div>
<div class="div2 col-xs-pull-12">
</div>

是否可以使用 LESS mixins 更改列顺序？或者这个功能目前不可用？做这样的事情是个好习惯吗？：

.div1 {
    .make-xs-column(12);
    .col-sm-push-12;
}
.div2 {
    .make-xs-column(12);
    .col-sm-pull-12;
}

已编辑：我的意思是询问 xs 列而不是 sm。我应该在 sm+ 设备上拉和推并颠倒我的标记顺序吗？

【问题讨论】：

如果您将 col-sm-push-12 定义为 mixin，那么您可以使用 .col-sm-push-12。在您的示例中 col-sm-push-12 是一个类而不是 mixin

【解决方案1】：

这与 .make-*-column() 的故事相同，即 there're .make-*-column-offset .make-*-column-push 和 .make-*-column-pull mixins。

【讨论】：