Bootstrap多列折叠

Question

嗨，大家好，我需要有两列布局，但我需要内容堆叠起来。 这里是一个小提琴http://jsfiddle.net/kljuco/KPMCJ/。

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 
<div class="row"> 
    <div class="span6"> 
     <table class="table"> 
      <tr><th colspan="2">Test 1</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
    </div> 
    <div class="span6"> 
     <table class="table"> 
      <tr><th colspan="2">Test 2</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
    </div> 
</div> 
<div class="row"> 
    <div class="span6"> 
     <table class="table"> 
      <tr><th colspan="2">Test 3</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
    </div> 
    <div class="span6"> 
      <table class="table"> 
       <tr><th colspan="2">Test 4</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
    </div> 
</div><div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div><div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 

我需要“测试3”表在“测试1”表下。 日Thnx

Answer 1

你可以嵌套你行这样的...

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 
<div class="row"> 
    <div class="span6"> 
     <table class="table"> 
      <tr><th colspan="2">Test 1</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
     <div class="row"> 
      <div class="span6"> 
       <table class="table"> 
        <tr><th colspan="2">Test 3</th></tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </div> 
    <div class="span6"> 
     <table class="table"> 
      <tr><th colspan="2">Test 2</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
     <div class="row"> 
      <div class="span6"> 
       <table class="table"> 
        <tr><th colspan="2">Test 4</th></tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div><div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 

至少你可以开始从这一调整得到你想要的

Answer 2

的结果。这是不是一件CSS应该做的而让jQuery的解决你的问题：

<table id="first" class="table"> .... 
<table id="second" class="table"> ... 
<table id="third" class="table"> ... 

$('#third').insertBefore('#second'); 

Answer 3

此外，另一种方式：http://jsfiddle.net/persianturtle/KPMCJ/3/

坏消息是我不得不复制第二张表的html。

好消息，没有jQuery。

看一看。

@media (max-width: 767px) { 

    #second { 
     display:none; 
    } 

#second-small { 
     display:table; 
    } 


} 


@media (min-width: 766px) { 

    #second-small { 
     display:none; 
    } 


}