停止Bootstrap .col包裹undernath

Question

我的bootstrap div有问题，这是我在大屏幕上的当前设置：

------------------------------------
|                        |     2    |
             1           ------------
|                        |     3    |
------------------------ |          |
                         ------------

我的简化代码看起来有点像这样：

<div class="row">
    <div class="col-md-8 col-ms-12 col-sm-12"></div>
    <div class="col-md-4 col-ms-6 col-sm-6"></div>
    <div class="col-md-4 col-ms-6 col-sm-6"></div>
</div>

现在不幸的是，有时Div 2变得更大并且将Div 3推到Div 1的底部以下并且它包裹在下面。我怎么能阻止这种情况并让Div 3保持在右侧，即使低于Div 1？我已经尝试过clearfix但它似乎没有工作！

P.S我正在使用＆＃34; ms＆＃34;中小断点作为我已安装的额外断点。

Answer 1

当屏幕宽度变为float: right;或更多时，您可以将992px属性应用于第三个块。我为此目的定义了一个新的特殊类.pull-md-right。

请检查结果：

＆＃13;

＆＃13;

/* The heart of the matter */
@media (min-width: 992px) {
  .pull-md-right {
    float: right !important;
  }
}

/* Decorations */
.row > div:nth-of-type(1) { background: #9c6; min-height: 200px; }
.row > div:nth-of-type(2) { background: #ff0; min-height: 250px; }
.row > div:nth-of-type(3) { background: #f93; min-height: 150px; }
.row > div {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  padding-top: 6px; 
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-12">1</div>
    <div class="col-md-4 col-sm-6">2</div>
    <div class="col-md-4 col-sm-6 pull-md-right">3</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;