重新排序引導3組跨行

Question

我有一個佈局，看起來像這樣的列：

http://www.bootply.com/hKqgubV4t2

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-3 col-lg-2"><div class="well">1</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">2</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">3</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">4</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">5</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">6</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">7</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">8</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">9</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">10</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">11</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">12</div></div> 
    </div> 
</div> 

我想它看起來像這樣的大屏幕：

[ 1][ 2][ 3][ 4][ 5][ 6] 
[ 7][ 8][ 9][10][11][12] 

和這個爲xs-md：

[ 1][ 2][ 3][ 4] 
[ 7][ 8][ 9][10] 
[ 5][ 6][11][12] 

問題是，當我嘗試添加推拉，我得到這樣的：

http://www.bootply.com/ysafNpFpsL

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-3 col-lg-2"><div class="well">1</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">2</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">3</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">4</div></div> 
    <div class="col-xs-3 col-lg-2 col-xs-push-12 col-lg-push-0"><div class="well">5</div></div> 
    <div class="col-xs-3 col-lg-2 col-xs-push-12 col-lg-push-0"><div class="well">6</div></div> 
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">7</div></div> 
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">8</div></div> 
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">9</div></div> 
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">10</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">11</div></div> 
    <div class="col-xs-3 col-lg-2"><div class="well">12</div></div> 
    </div> 
</div> 

結果：

 [ 1][ 2][ 3][ 4] 
     [ 7][ 8]  [ 5][ 6] 
[ 9][10]  [11][12] 

所以推拉唐不會導致divs繞到下一行，而只是推動它們更多。有什麼方法可以對這些行的列進行重新排序嗎？

Answer 1

可以組兩列（8寬度和寬度4）行，像這樣：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-8"> 
     <div class="col-xs-3 col-lg-3"><div class="well">1</div></div> 
     <div class="col-xs-3 col-lg-3"><div class="well">2</div></div> 
     <div class="col-xs-3 col-lg-3"><div class="well">3</div></div> 
     <div class="col-xs-3 col-lg-3"><div class="well">4</div></div> 
     <div class="col-xs-3 col-lg-3"><div class="well">7</div></div> 
     <div class="col-xs-3 col-lg-3"><div class="well">8</div></div> 
     <div class="col-xs-3 col-lg-3"><div class="well">9</div></div> 
     <div class="col-xs-3 col-lg-3"><div class="well">10</div></div> 
    </div> 
    <div class="col-md-4"> 
     <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">5</div></div> 
     <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">6</div></div> 
     <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">11</div></div> 
     <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">12</div></div> 
    </div> 
    </div> 
</div>