Bootstrap 3 |在第一个较小的屏幕中，三列第三次折叠

Question

我整个上午都在努力解决这个问题。它看起来很明显，但不知怎的，我无法使其发挥作用。

我正在使用Bootstrap 3，我希望这种效果具有3列布局

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

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

1 | 2
3 | 2

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

在手机上
1
2
3

提前感谢您提供任何帮助

Answer 1

对于像这样的常规类，所有列宽都可以正常工作：

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