在 Twitter Bootstrap 3.1 中重新排序 div 无法按预期工作答案

【问题标题】：Reordering divs in Twitter Bootstrap 3.1 not working as intended在 Twitter Bootstrap 3.1 中重新排序 div 无法按预期工作
【发布时间】：2014-07-20 11:45:10
【问题描述】：

我正在尝试使用 Bootstraps 推/拉类重新排序 div 标签。这个stackoverflow在一定程度上回答了它：

Reordering divs responsively with Twitter Bootstrap?

但我认为答案并不完整。是的，它将 div 移动到正确的位置，但是一旦您将内容添加到标有“B”的 div，它就会下推标有“C”的 div。

如何让“C”直接位于“A”下方而不让“B”向下推？

示例：http://www.bootply.com/WYZUhmD0Ft

我能够改用“pull-right”和“pull-left”，它们可以工作。但是，它们没有响应，需要额外的 CSS 才能在不同的断点处工作。

http://www.bootply.com/PILUCrxwYa

【问题讨论】：

对不起，如果不清楚，我在示例中提供了代码：bootply.com/WYZUhmD0Ft

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

查看this 对类似问题的回答。

你想要的布局可以使用浮动来实现。

<div class="container">    
<div class="row">
    <div class="col-xs-12 col-md-3 pull-right">Content of A</div>
    <div class="col-xs-12 col-md-9 pull-left">
        <p>Content</p>
        <p>of</p>
        <p>B</p>
    </div>        
    <div class="col-xs-12 col-md-3 pull-right">Content of C</div>
</div>

编辑：

如果您只在某些屏幕上需要这种行为，您可以创建自己的类：

在您的 LESS 文件中添加这些自定义样式：（取自 grid.less 的变量）

@media (min-width: @screen-sm-min) {
   .pull-right-sm {
       float: right;
   }
}

@media (min-width: @screen-md-min) {
    .pull-right-md {
        float: right;
    }
}

@media (min-width: @screen-lg-min) {
    .pull-right-lg {
         float: right;
    }
}

所以你现在有了 pull-right-sm pull-right-md pull-right-lg 类。

【讨论】：

是的，这就是我现在使用的解决方案。只是想知道是否有使用 3.0 中的新推/拉类的解决方案（即“col-md-push-6”）也就是说，我什至不确定是否需要该功能。你展示的方式很有效。
拉左拉右没有响应是什么意思？
您可以通过为每个大小使用适当的类来设置列的大小： col-md-val col-xs-val col-sm-val col-lg-val（其中 val 在 [1 , 12])
我理解的方式，如果我错了，请纠正我，“pull-right”将始终向右浮动，无论视图断点如何，“col-md-push-6”将浮动在“md”和更大的视图中向右。不包括“sm”和较小的视图。
感谢@CatalinMunteanu，这正是我为我的项目所做的，我想我只是想知道这里概述的引导样式：getbootstrap.com/css/#grid-column-ordering 是否按预期工作（通过不正确浮动），或者也许我做错了什么。不管怎样，感谢您的宝贵时间。