2或3個響應列引導程序

Question

我想要使用行跨度的列數可變，具體爲xs上的3列，sm上的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選擇，因爲它是更原生瀏覽器。即使塊的內容是動態添加的，我相信你仍然可以找到解決方法。

Answer 2

我對你的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（1路） -

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（第2道） -

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/

Answer 3

對於一個CSS唯一的解決辦法，你可以位置C柱相對絕對的.row斷點處sm，清晰B列。保持你的HTML 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。