Spazio verticale tra le righe di bootstrap

Question

Quindi sto lavorando a un layout e per "reattività" ho deciso di utilizzare Bootstrap. Ora ho un problema con il sistema di griglia, credo.

Il risultato che voglio è la seguente:

|-----------|  |---------------------------------| 
|  1  |  |         | 
|-----------|  |         | 
        |    4    | 
|-----------|  |         | 
|  2  |  |         | 
|-----------|  |---------------------------------| 

|-----------| 
|  3  | 
|-----------| 

Ma questo non è accaduto. Ciò accadesse è che ho ricevuto una spaziatura verticale tra sgradevole riquadri 1 e 2, che dura fino alla fine della scatola 4. Vedere un esempio reale vita qui:

è quello che succede. Lo spazio tra la scatola 1 e 2 campate fino alla fine della scatola 4.

Ecco il mio HTML:

<div class="row"> 
    <div class="col-md-4 nopadding leftnews"> 
     <div id="radio"> 
      <audio id="radio-audio" controls="" autoeplay="" preload="none"> 
       <source src="#" type="audio/mpeg"> 
      </audio> 
      <div id="stats" style="background-image: url('assets/img/test.png');"> 
       <span class="dj-name">*****</span> 
       <span class="listeners">30</span> 
       <span class="song"><marquee id="song">Katy Perry - Thinking Of You (Acoustic Version)</marquee></span> 
      </div> 
      <div id="player"> 
       <div class="volume"> 
        <input name="volume-control" id="volume-control" type="range" min="0" max="99" value="100" step="1" onchange="volumeUpdate(value)"> 
       </div> 
       <img id="audio-update" src="assets/img/radio_update.png" alt=""> 
       <div id="audio-play" class="radio-control"></div> 
       <div id="audio-pause" class="radio-control"></div> 
      </div> 
     </div> 
    </div> 

    <div class="col-md-8 nopadding"> 
     <div class="panel panel-default panel_big"> 
      <div class="panel_top_orange"></div> 
      <div class="panel-body"> 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 
      </div> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-4 nopadding"> 
     <div class="panel panel-default panelsmall"> 
      <div class="top_rooster"> 
       <span>Rooster</span> 
      </div> 
      <div class="panel-body"> 
       <div id="rooster"> 
        <table style="width:265px;"> 
         <tr class="current" title="11:00 - 13:00" data-toggle='tooltip'> 
          <td> 
           <img src="assets/img/test.png" style="position: relative; top:-5px;" /> 
          </td> 
          <td class="nu"><b>NU</b>: </td> 
          <td> </td> 
          <td class="djnu"> ****</td> 
         </tr> 

         <tr title="12:00 - 13:00" data-toggle='tooltip'> 
          <td> 
           <img src="assets/img/test.png" style="position: relative; top:-5px;" /> 
          </td> 
          <td class="nu">HIERNA: </td> 
          <td> </td> 
          <td class="dj"> ****</td> 

         </tr> 
         <tr title="13:00 - 14:00" data-toggle='tooltip'> 
          <td > 
           <img src="assets/img/test.png" style="position: relative; top:-5px;" /> 
          </td> 
          <td class="nu">STRAKS: </td> 
          <td> </td> 
          <td class="dj"> ****</td> 
         </tr> 
        </table>  
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

breve riepilogo del codice:

ho una fila, in quella riga, non c'è a col-md-4 che punta al riquadro 1. Quindi nella stessa riga, c'è un col-md-8 che punta al riquadro 4. Sotto quella riga, c'è una nuova riga che contiene un col-md-4 (Box 2).

Come la riparazione dannatamente lo spazio? E 'davvero fastidioso ...

Grazie.

(Mi dispiace se ho scritto una domanda vaga. Ho provato a fare come molto senso di lui come possibile)

Answer 1

Perché non dividere lo schermo in due colonne, .col-MD-4 e col-md-8 e metti il ​​contenuto della scatola 1, 2 e 3 nella colonna di sinistra? Uno schermo più piccolo di md ciò renderebbe le caselle 100% del .container e in ordine crescente.

.box { 
 
    border: 1px solid #c66; 
 
    background-color: #f99; 
 
    margin-bottom: 15px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    color: #fff; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-size: 48px; 
 
    text-align: center; 
 
} 
 
.box--high { 
 
    height: 250px; 
 
    line-height: 250px; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="box">1</div> 
 
     <div class="box">2</div> 
 
     <div class="box">3</div> 
 
    </div> 
 
    <div class="col-md-8"> 
 
     <div class="box box--high">4</div> 
 
    </div> 
 
    </div> 
 
</div>