Question

我想以下列方式分配4个div：

在大屏幕中，它看起来像：

-------------
|  A  |  B  |
-------------
|  D  |  C  |
-------------

并在小屏幕中：

-----
| A |
-----
| B |
-----
| C |
-----
| D |
-----

有没有办法可以在没有javascript或flexbox的情况下实现这一目标？

Answer 1

查看推送和放大器拉类：http://getbootstrap.com/css/#grid-column-ordering

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-sm-12">A</div>
        <div class="col-lg-6 col-sm-12">B</div>
        <div class="col-lg-6 col-lg-push-6 col-sm-12">C</div>
        <div class="col-lg-6 col-lg-pull-6 col-sm-12">D</div>
    </div>
</div>

Answer 2

http://www.bootply.com/DADhwYwk1I

看一下为网格布局使用多个类。请参阅上面的链接，了解我是如何做到这一点的。还有其他方法可以完成这项工作。（在链接屏幕的右侧有一个移动图标。点击它可以查看便携式设备上的内容。）

<div class="row">
    <div class="col-lg-6 col-xs-12">A</div>
    <div class="col-lg-6 col-xs-12">B</div>
</div>
<div class="row">
   <div class="col-lg-6 col-xs-12">C</div>
   <div class="col-lg-6 col-xs-12">D</div>
</div>

Answer 3

是的，必须为此创建两行，这些是用于根据设备大小显示的类。

lg - 适用于大屏幕（大型桌面）
md - 适用于中型屏幕（中型屏幕桌面）
sm - 适用于小屏幕（平板电脑，Ipads）
xs - 用于超小屏幕（移动设备）

HTML：

<div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-xs-12">A</div>
    <div class="col-lg-6 col-md-6 col-xs-12 col-xs-12">B</div>
</div>
<div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-xs-12">C</div>
    <div class="col-lg-6 col-md-6 col-xs-12 col-xs-12">D</div>
</div>

Bootstrap网格：按顺时针顺序将2x2元素分配给1x4？

3 个答案: