html - 当中间列比其他列大时，在 bootstrap 布局中从 3 列切换到 2 列

Question

我在使用 boostrap 布局时遇到以下情况:

lg 和 md 外形规范的 3 列布局。

  *---*-----*---*
  | A |     | C |
  *---|  B  |---*
      |     |   
      *-----*

当我切换到 sm 外形时，我希望我的列按如下方式换行:

    *---*-----*
    | A |     |
    *---*  B  |
    | C |     |
    *---*-----*

但它给我留下了这样的布局:

   *---*-----*
   | A |     |
   *---|  B  |
       |     |
   *---*-----*
   | C |
   *---*

知道如何获得所需的行为吗？

这里是我的 html 代码:

<div class="row">
   <div class=" col-num-1 col-sm-3 col-md-2 col-lg-3">1</div>
   <div class="col-num-2 col-sm-9 col-md-8 col-lg-6">2</div>
   <div class="col-num-3 col-sm-3 col-md-2 col-lg-3">3</div>
</div>

这里是我的CSS代码:

.col-num-1 {
    background-color: #7CBEB1;
    height: 100px;
}

.col-num-2 {
    background-color: #EA865A;
    height: 300px;
 }

.col-num-3 {
    background-color: #38455B;
    height: 100px;
 }

使用 fiddle 进一步说明 http://jsfiddle.net/ujrwyrbr/15/

Answer 1

float: right; 小于992px但大于768px时添加到中间列。

@media (max-width: 992px) and (min-width: 768px) {
   .col-num-2 {
       float: right;
}

http://jsfiddle.net/wusvgvd5/1/