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> 

Мне нужно, чтобы таблица «Test 3» была справа под таблицей «Test 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; 
    } 


}