Bootstrap 响应式视图的网格排列

Question

可以这样做吗？

我有 3 列连续。第一列有 2 个嵌套行 - 顶部和底部。能不能把第一列底行排在第四位是移动端view？

这是我的代码： http://www.bootply.com/yhhFaWRjC6 编辑：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row" style="height:100%;">
    <div class="col-md-4 col-lg-4 col-sm-12" style="background-color:#ccc;height:100%; padding:0px;">
      <div class="row">
        <div class="col-md-12 " style="height:180px;background-color:#d33;">one</div>
      </div>
      <div class="row">
        <div class="col-md-12 " style="height:180px;background-color:#edd;">four</div>
      </div>
    </div>
    <div class="col-md-4 col-lg-4 col-sm-12" style="height:360px;background-color:#e42;">two</div>
    <div class="col-md-4 col-lg-4 col-sm-12" style="height:360px;background-color:#444;color:#fff;">three</div>
  </div>
</div>

我想让它的顺序是： - 一 - 二 - 三 - 四在手机中

Answer 1

假设第一列的高度小于第二列和第三列的高度恐怕你只能通过以下方式实现：

复制第四列的内容并showing/hiding它基于网格大小（例如xs）。我将在下面展示一个例子。
使用JavaScript在网格大小变化时移动第四列的内容。我有一个 jQuery 插件的小原型，可以在 https://github.com/ckuijjer/jquery-breakpointspy
使用 flexbox 创建您自己的网格系统。如果您不必支持 IE9 或更低版本，这可能是一个选项。

我已经实施了下面的第一个选项，并做了一些额外的更改：

我已将内联样式移动到名为 .one、.two、.three 和 .four 的 classes 中代码更干净一些。

我已经开始使用移动布局并给出了所有 classes col-xs-12。这使得一个列从大小 xs 开始占用 12 列。

<div class="container">
  <div class="row">
    <div class="col-xs-12 one">one</div>
    ...
    <div class="col-xs-12 four">four</div>
  </div>
</div>

因为我们想让每一列占据容器的四分之一，所以我向每一列添加了 col-md-4。每列现在看起来像<div class="col-xs-12 col-md-4 one">。无需添加 col-lg-4 或 col-sm-12.
仅在特定的网格大小上显示列可以通过例如visible-xs-block。因为我们希望第四列仅在 xs 和 sm 上可见，所以我将 html 更改为 <div class="col-xs-12 visible-xs-block visible-sm-block four">four</div>。请注意，我已经删除了 col-md-4，因为不再需要它了。
要在屏幕为md或lg时将第四列放在第一列下方第一列更改为嵌套网格。我选择不使用第二个 .row，因为超过 12 列将使下一列无论如何都会下降并使用 .col-xs-12，因为我总是希望列具有 bootstrap 网格 class 就可以了，不管屏幕大小。我本可以使用 visible-md-block 和 visible-lg-block 使其仅在 md 和 lg 上显示，但为了好玩我使用了相反的 hidden-xs 和hidden-sm.
```
<div class="col-xs-12 col-md-4">
  <div class="row">
    <div class="col-xs-12 one">one</div>
    <div class="col-xs-12 hidden-xs hidden-sm four">four</div>
  </div>
</div>
```

查看下面的完整代码：

.one {
  height: 180px;
  background-color: #d33;
}
.two {
  height: 360px;
  background-color: #e42;
}
.three {
  height: 360px;
  background-color: #444;
  color: #fff;
}
.four {
  height: 180px;
  background-color: #edd;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div class="row">
        <div class="col-xs-12 one">one</div>
        <div class="col-xs-12 hidden-xs hidden-sm four">four</div>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 two">two</div>
    <div class="col-xs-12 col-md-4 three">three</div>
    <div class="col-xs-12 visible-xs-block visible-sm-block four">four</div>
  </div>
</div>

Bootstrap 响应式视图的网格排列

Bootstrap Grid arrangement on responsive view

css

grid

twitter-bootstrap