3 列响应式布局变为 2 列布局，中心列在移动分辨率下移动到底部

Question

我需要知道当页面缩小到移动视图时，是否可以在左（固定像素宽度）和右（流动）列下方显示一个中心固定大小的列，从而变得流动父容器的全宽 div.

Bootstrap 库可用，但本例中的左列固定为精确的像素宽度。

此处示例：

Answer 1

我想这就是您要找的： http://codepen.io/anon/pen/xGzpKz

在宽度属性内使用 calc CSS3 函数可以帮助您完成通常必须使用 javascript 的功能。

在我发给您的 link 中，我只是将所有专栏放在一个包装器中。所有这些列都向左浮动，除了橙色的列向右浮动。这样做允许任何左侧浮动项目填充蓝色和橙色列之间的剩余 space。

然后我将我的橙色 div 宽度设置为：

width: calc(100% - (200px * 2))

200px 是一个固定宽度列的宽度。

然后，在移动设备上，我只是通过将宽度设置为 100% 告诉红色列返回它所属的位置，并告诉橙色列它的一侧只剩下一列。

@media screen and (max-width: 640px) {
  .wrapper{
    .column{
      float: left;
      &:nth-child(2){
        width: calc(100% - 200px);
      }
      &:last-child{
        width: calc(100%);
      }
    }
  }
}

Answer 2

重新排列 bootstrap 中的列，您可以使用推拉类

<div class="col-sm-3 col-xs-6">
     A
</div>
<div class="col-sm-3 col-xs-6 col-sm-push-6">
     B
</div>
<div class="col-sm-2 col-xs-4 col-sm-pull-3">
     C
</div>

3 列响应式布局变为 2 列布局，中心列在移动分辨率下移动到底部

3 column responsive layout becomes 2 column layout with center column moving to bottom in mobile resolution

html

css

fluid-layout

responsive-design

twitter-bootstrap

Bootply link