2或3个响应列引导程序

Question

我希望使用行跨度具有可变数量的列,在xs上是特定的3列,在sm上是2列(在另一个上面是前2列),在lg上是3列.我不知道如何为sm屏幕实现响应行.

这是视觉表示:

到目前为止,这是我的代码:

<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">  
            <div class="alert alert-info">B</div>
        </div>     

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

    </div>
</div>

这是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 选项，因为它更适合浏览器。即使块的内容是动态添加的，我相信您仍然可以找到解决方法。