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

【问题标题】：3 column responsive layout becomes 2 column layout with center column moving to bottom in mobile resolution3 列响应式布局变为 2 列布局，中心列在移动分辨率下移至底部
【发布时间】：2015-07-15 02:38:47
【问题描述】：

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

Bootstrap 库可用，但在这种情况下，左列固定为精确的像素宽度。

此处的示例：

【问题讨论】：

格式非常具体。您必须为固定宽度定义媒体查询。

标签： html css twitter-bootstrap responsive-design fluid-layout

【解决方案1】：

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

在 width 属性中使用 calc CSS3 函数可以帮助您完成通常必须使用 javascript 来完成的事情。

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

然后我将橙色 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%);
      }
    }
  }
}

【讨论】：

我刚刚实现了这个解决方案，它的工作方式与演示完全一样。您还提供了我需要的一切，以便将其轻松实现到我现有的 css 结构中。谢谢！

【解决方案2】：

重新排列引导程序中的列，您可以使用推拉类

<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>

Bootply link

【讨论】：

我应该提到我试过这个，但问题是在较大的平板电脑/桌面分辨率中，左列和中列必须是固定宽度。我无法使用纯引导类来做到这一点。