Question

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

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

|1||2| Which it is displaying.

但是在sm（小）和xs（超小）移动设备上，我希望它将其显示为
| 2 |
| 1 |

我已经尝试过bootstrap的推送和拉动xs和sm但它不起作用。使用push（col-md-push-xx）和（col-md-push-xx）拉动xs和sm，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

你的直觉是否正确，推拉是最佳选择。它们应该是：col-md-push-6和col-md-pull-6 for Bootstrap 3.这是一个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 -->

按特定顺序排列特定设备大小的选项卡

1 个答案: