针对特定设备尺寸按特定顺序排列选项卡

Question

https://codepen.io/TheNoviceProgrammer/pen/JJzvQq

对于桌面和 iPad，我希望 div 显示为

|1||2| Which it is displaying.

但在 sm(small) 和 xs(extra small) 移动设备上，我希望它显示为
|2|
|1|

我已经尝试过引导程序对 xs 和 sm 的推拉，但它不起作用。而对于 xs 和 sm 使用 push(col-md-push-xx) 和 (col-md-push-xx)pull，iPad 和桌面的布局将更改为 |2|1|，而移动显示保持不变
|1|
|2|

我想我可能以错误的方式使用了 div 中的类，如果有人可以帮助我，将不胜感激。谢谢。

我的 HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 col-xs-12 col-xs-offset-0 col-sm-12 col-sm-offset-0 col-sm-offset-right-0 col-xs-offset-right-0">
            <div class="row">
                <div class=" col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 col-md-6 col-lg-4 col-lg-offset-2">
                    <div>Labels & a bootstrap well</div>
                </div>
                <div class=" col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 col-md-6 col-lg-4 col-lg-offset-0 col-lg-offset-right-2">
                    <div>Labels & a Table Gridview</div>
                </div>
            </div>
        </div>
        <div class="col-md-1 col-lg-2"></div>
    </div>
</div>

使用 col-md-push 并拉取后，平板电脑和台式机的重叠如下：

[![在此处输入图片描述][5]][5]

在移动设备中，它仍然显示与上面的移动屏幕截图相同。

Demo Pen

Answer 1

是的，你的直觉是正确的，推拉是要走的路。它们应该是：对于 Bootstrap 3 的 col-md-push-6 和 col-md-pull-6。这里有一个 link to a pen 可以帮助你。还要记住，类大小是固有的，您可以调用 col-xs-12 并且小断点也将继承 12 列宽。

HTML：

<div class="container-fluid">
    <div class="row">
        <div class="well col-xs-12 col-md-6 col-md-push-6">Labels &amp; a bootstrap well</div>
        <div class="grid col-xs-12 col-md-6 col-md-pull-6">Labels &amp; a Table Gridview</div>
    </div><!-- row -->
</div><!-- container-fluid -->