用推拉带改变科尔的顺序

Question

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

|A||B||C|

但在SM屏幕上，我需要的是：

|B|
|C|
|A|

我的HTML在下面。我试着在包含我的按钮的div中添加“col push-10”，但那只是将它推到了它自己的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>

Answer 1

通常，您希望元素在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>

Demo http://www.codeply.com/go/yMxh8sGwMZ

另外，不要忘记将列保存在row中以获得适当的填充。

Answer 2

您应该编写您的元素，以便您想要看到-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> 

顺便说一句，您应该只使用li作为ul的直接子元素，而不使用直接在ul中的div等其他元素，因为它是无效的。