响应式视图上的引导网格排列答案

【问题标题】：Bootstrap Grid arrangement on responsive view响应式视图上的引导网格排列
【发布时间】：2015-01-02 19:39:20
【问题描述】：

可以这样做吗？

我连续有 3 列。第一列有 2 个嵌套行 - 顶部和底部。是否可以让第一列的底行在第四个位置是移动视图？

这是我的代码： 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>

我想让它的顺序是： - 一 - 二 - 三 - 四个在移动端

【问题讨论】：

您的链接目前不起作用（给出“应用程序错误”）。您能否为您的问题添加更多信息？我特别困惑什么是“第四位”？

标签： css twitter-bootstrap grid

【解决方案1】：

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

复制第四列的内容并根据网格大小显示/隐藏它（例如xs）。我将在下面展示一个示例。
当网格大小发生变化时，使用 JavaScript 移动第四列的内容。我在https://github.com/ckuijjer/jquery-breakpointspy
使用 flexbox 创建您自己的网格系统。如果您不必支持 IE9 或更低版本，这可能是一个选项。

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

我已将内联样式移到名为 .one、.two、.three 和 .four 的类中，以使代码更加简洁。

我已经开始使用移动布局并给所有课程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，因为我总是希望列上有一个引导网格类，无论屏幕大小如何.我本可以使用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>

【讨论】：