Css 使用推拉引导更改cols的顺序

我刚刚在Bootstrap中发现了“push”和“pull”类，但是在以我喜欢的方式实现它们时遇到了很多困难。在XS屏幕上，我的内容显示如下，这是正确的：

|A||B||C|

但在SM屏幕上，我需要：

|B|
|C|
|A|

我的HTML在下面。我尝试将“col-sm-push-10”添加到包含我的按钮的div中，但这只是将它推到了它自己的div中的右侧。我需要实际向下移动这个div。任何帮助都将不胜感激

<div class="container-fluid">
    <div class="col-sm-4">
       <ul class="prod-group">
         <div class="col-xs-2 col-sm-10">
            <li><button type="button" class="btn">A</button></li>
          </div>
          <div class="col-xs-6 col-sm-10">
            <li>B</li>
           </div>
           <div class="col-xs-4 col-sm-10">
              <li>Cr</li>
           </div>
        </ul>    
     </div>

A
B
铬

您应该按照希望在-sm-上看到的顺序编写元素。 然后将它们的位置调整到-xs-：

<div class="row">
    <div class="col-sm-12 col-xs-4 col-xs-push-4">
        B
    </div>

    <div class="col-sm-12 col-xs-4 col-xs-push-4">
        C
    </div>

    <div class="col-sm-12 col-xs-4 col-xs-pull-8">
        A
    </div>     
</div> 

B
C
A.

---

顺便说一句，您应该只使用li作为ul的直接子元素，并且不要直接在ul内部使用其他元素，例如div，因为它无效。

通常您希望元素在xs屏幕上垂直堆叠，而在更大的（sm）屏幕上保持水平，所以这是一个不寻常的情况，你实际上想要相反的结果。首先创建堆叠

sm

布局，然后使用推拉调整

xs

。。A-B-C在大屏幕上。B-C-A在手机上

<div class="container-fluid">
    <div class="row">
    <div class="col-sm-4">
        <ul class="row prod-group">
            <li class="col-xs-6 col-sm-10 col-xs-push-2 col-sm-push-0">
                B
            </li>
            <li class="col-xs-2 col-sm-10 col-xs-pull-0 col-sm-pull-0">
                C
            </li>
            <li class="col-xs-4 col-sm-10 col-xs-pull-8 col-sm-pull-0">
                A
            </li>
        </ul>
    </div>
    </div>
</div>

B


C


A.

演示

---

另外，不要忘记将列保留在

行中，以便进行适当的填充。
这只是在我的屏幕处于sm时保留xs布局。如何将包含B的div移动到行的底部？无法使用push/pull类上下移动元素。但我根据你的评论更正了我的答案。是的，这是一个奇怪的案例！让我试试，谢谢。谢谢！这正是我需要的！