引导程序 3 |三列第 3 列在较小的屏幕中折叠在第 1 列之下

【问题标题】：Bootstrap 3 | three columns 3rd collapses under 1st in smaller screens引导程序 3 |三列第 3 列在较小的屏幕中折叠在第 1 列之下
【发布时间】：2014-09-14 13:17:15
【问题描述】：

我整个上午都在努力解决这个问题。它看起来很明显，但不知何故我无法让它工作。

我正在使用 Bootstrap 3，我希望通过 3 列布局来实现此效果

在宽屏上
3列布局
1 - 2 - 3

在窄屏幕上
第三列折叠在第一列下方以创建两列布局，例如：

1 | 2
3 | 2

此时我的第 3 列总是在秒列高度之后堆叠！

在手机上
1
2
3

提前感谢您的帮助

【问题讨论】：

您有四列还是三列？你应该张贴一个小提琴或垃圾箱。人们不想随意回答您并创建执行此操作所需的所有 html。在你的 html 中先从移动开始，开始添加推拉类和网格列类

标签： twitter-bootstrap layout multiple-columns

【解决方案1】：

Th 列宽都可以与这样的一组常规类一起正常工作：

class="col-xs-12 col-sm-6 col-md-4"

这只是定位sm 大小的屏幕以适当清除内容的问题。根据我对Change section order with Bootstrap 3 的回答，您可以这样做：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">1</div>
    <div class="col-xs-12 col-sm-6 col-md-4 middleDiv">2</div>
    <div class="col-xs-12 col-sm-6 col-md-4">3</div>
</div>

@media (min-width: 768px) and (max-width: 991px) { 
    .middleDiv {
       float: right;
    }
}

Demo in Fiddle

【讨论】：