Question

我希望使用行跨度具有可变数量的列，在xs上具体为3列，在sm上为2列（前2列为一列），以及lg上的3列。我不知道如何为sm屏幕实现响应行。

这是视觉表现：

到目前为止，这是我的代码：

wire

这是codepen：http://codepen.io/nebitno/pen/ORxjLv

Answer 1

这非常棘手。这是我提出的解决方案。您需要使用一些jQuery来获得所需的结果。

这是html，注意我是如何切换列的：

<div class="container text-center">  
    <div class="row">   

        <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
            <div class="alert alert-warning">A</div>
        </div>   

        <div class="col-sm-8 col-lg-6 col-lg-pull-0 big">
            <div class="alert alert-danger">C</div>
        </div>  

        <div class="col-sm-4 col-lg-3 col-lg-pull-9 small">  
            <div class="alert alert-info">B</div>
        </div>     

    </div>
</div>

这是jQuery：

<script>
          var $iW = $(window).innerWidth();
          if ($iW < 768){
             $('.small').insertBefore('.big');
          }else{
             $('.big').insertBefore('.small');
          }
    </script>

注意：这样做的缺点是jQuery没有绑定到窗口大小调整。因此，如果您在文档加载后调整窗口大小，则会产生非常糟糕的结果。但是，也可以使用$(window).resize(function(){});

修复此问题

但是，如果您根本不想使用JS。这是另一个需要您复制其中一个块的解决方案。如果这个块的内容是静态的而不是很多，我相信这是一个很好的妥协。但是，您也可以调整一下以满足您的需求。

这是HTML：

<div class="container text-center">
     <div class="row">   

        <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
            <div class="alert alert-warning">A</div>
        </div>   

         <div class="col-sm-4 small-screen-only">  
            <div class="alert alert-info">B</div>
        </div>   

        <div class="col-sm-8 col-lg-6 col-lg-pull-0 big">
            <div class="alert alert-danger">C</div>
        </div>  

        <div class="col-sm-4 col-lg-3 col-lg-pull-9 small">  
            <div class="alert alert-info">B</div>
        </div>     

    </div>
</div>

注意块B的重复。

这是CSS：

       .small-screen-only{
            display: none;
        }

        @media all and (max-width: 767px)
        {
            .small-screen-only{
                display: block
            }

            .small{
                display: none;
            }
        }

我个人会选择CSS选项，因为它更适合浏览器。即使块的内容是动态添加的，我相信你仍然可以找到解决方法。

Answer 2

对于仅限CSS的解决方案，您可以相对于断点.row处的sm绝对位置列C ，并清除列B 。保持您的HTML＆amp; CSS与其他CSS一样：

@media screen and (min-width: 768px) and (max-width : 1200px) {

    .row {
        position:relative;
    }

    .col-sm-4:nth-child(2) {
        clear:left;
    }

    div[class^="col-"]:last-child {
        position:absolute;
        right:0;
    }

}

这种方法的缺点是.row如果 C列的高度超过 A + B列，则不能正确清除高度，如Clearfix with absolute positioned elements中所述。

以下是您的Codepen的updated version。

Answer 3

我对你的html做了一些细微的修改，并添加了两种jQuery方法来实现这个功能。您可以使用任何更适合您的方法。

HTML -

<div class="container text-center">  
    <div class="row">   

        <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
            <div class="alert alert-warning">A</div>
        </div>   

        <div class="col-sm-4 col-lg-3 col-lg-pull-3 B">  
            <div class="alert alert-info">B</div>
        </div>     

        <div class="col-sm-8  col-lg-6 col-lg-pull-3 C">
            <div class="alert alert-danger" >C</div>
        </div>  

    </div>
</div>

jQuery（第一种方式） -

 var wH = $(window).innerWidth();
              if (wH < 992 && wH>=768){
                 $('.C:parent').each(function () {
                    $(this).insertBefore($(this).prev('.B'));
                 });
              }else if(wH<768 || wH>=992)
              {
                 $('.B:parent').each(function () {
                    $(this).insertBefore($(this).prev('.C'));
              });   
}
$(window).resize(function() {
          wH = $(window).innerWidth();
          if (wH < 992 && wH>=768){
             $('.C').insertBefore('.B');        
          }else if(wH<768 || wH>=992)
          {
             $('.B').insertBefore('.C');        
          }
          })

看看这个小提琴： http://jsfiddle.net/SkyT/wVVbT/150/

jQuery（第二路） -

var wH = $(window).innerWidth();
              if (wH < 992 && wH>=768){
                 $('.C').insertBefore('.B');        
              }else if(wH<768 || wH>=992)
              {
                 $('.B').insertBefore('.C');        
              }
$(window).resize(function() {
              var wH = $(window).innerWidth();
              if (wH < 992 && wH>=768){
                 $('.C:parent').each(function () {
                      $(this).insertBefore($(this).prev('.B'));
                 });
              }else if(wH<768 || wH>=992)
              {
                 $('.B:parent').each(function () {
                      $(this).insertBefore($(this).prev('.C'));
                 });    
              }
              })

查看这个小提琴：https://jsfiddle.net/SkyT/tst5g7ec/1/

2或3个响应列引导程序

3 个答案: