3列响应布局变为2列布局，中心列以移动分辨率向下移动

Question

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

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

示例：

Answer 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%);
      }
    }
  }
}

Answer 2

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

ContentTemplate

Bootply link