Bootstrap - ha una riga solo sul dispositivo di piccole dimensioni

Question

Per la pagina dei miei piani utilizzo pannelli che contengono il contenuto di ciò che ciascun piano offre.

Il problema che sto avendo è perché ogni pannello è una dimensione diversa, quando si visualizza sul cellulare che assomiglia a questo:

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 1 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 2 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 3 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 4 --> </div> 
    </div> 
</div> 

voglio farlo sembrare come questo :

<!-- This is how I attempted to do it --> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 1 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 2 --> </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 3 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 4 --> </div> 
    </div> 
</div> 

Ma quando lo faccio così, sembra che questo su schermi di grandi dimensioni:

Come posso ottenere 2 col- su schermi di piccole dimensioni e 4 col- su grandi schermi senza dover ripetere il mio codice e usare hidden- * and visible- * per le righe?

Ecco una bootply di questa pagina: http://www.bootply.com/POHPsCRmmM

Answer 1

Qui si va:

Bootply

ho preso a lavorare dividendo sinistra due div elementi e destra due div elementi nei loro rispettivi contenitori. Poi ho usato una combinazione di col-lg, col-md, e col-sm per ottenere l'effetto che si voleva:

 <div class="letter-space"> 
      <div class="row"> 
       <div class="col-lg-6 col-md-12 col-sm-12"> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading purple"> 
          <h1 class="panel-title fat">Free</h1> 
          <small>$0 <i>for life</i></small> 
         </div> 
         <div class="panel-body grey"> 
          Full access 
          <hr class="hr-line"> 
          New free sounds every month 
          <hr class="hr-line"> 
          <div class="click" tooltips="" tooltip-html="<center><strong>Free support in our forums</strong> <br> support.resonanceinn.com</center>" tooltip-size="small"> 
           <span>Community Support</span> 
          </div> 
          <hr class="hr-line"> 
          <a class="btn btn-primary-white btn-lrg btn-block margin-top" href="/register">Free</a> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Deluxe</h1> 
          <small>$9.99/<i>month</i></small> 
         </div> 
         <div class="panel-body"> 
          30 sounds a month 
         </div> 
        </div> 
       </div> 
       </div> 


     <div class="col-lg-6 col-md-12 col-sm-12"> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Suite</h1> 
          <small>$19.99/<i>month</i></small> 
         </div> 
         <div class="panel-body"> 
          300 Sounds a month 
         </div> 
        </div> 
       </div> 


       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Penthouse</h1> 
          <small>$199/<i>year</i></small> 
         </div> 
         <div class="panel-body"> 
          Unlimited 
         </div> 
        </div> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 

Answer 2

provare qualcosa di simile:

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 1 --> </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 2 --> </div> 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 3 --> </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 4 --> </div> 
     </div> 
    </div> 
</div> 

bootply: http://www.bootply.com/G9NGCPoOKe

auguro che funziona per voi!

Answer 3

Questa è una domanda un po 'vecchia, e ha già una risposta accettata; Volevo un design un po 'più fluido (e il mio caso d'uso non corrisponde esattamente al tuo) quindi ho trovato una soluzione diversa, volevo solo registrarla qui per i posteri.

Le colonne di bootstrap si basano su float: left, motivo per cui si ottiene il layout strano quando le colonne si avvolgono e la colonna di sinistra è più alta della destra. In questo caso il browser tenta di posizionarlo più a destra, se lo spazio lo consente, prima di spostarlo sulla riga successiva.

Non si desidera copiare le colonne e utilizzare le classi visibili/nascoste, esiste tuttavia un'altra opzione che utilizza classi visibili/nascoste che sfruttano il fatto che si tratta di contenitori mobili. Il CSS ha la proprietà clear per forzare lo spostamento di un contenitore al di sotto di tutti i container mobili (il valore left lo sposta al di sotto di tutti i numeri a virgola mobile, right sotto tutti i numeri a virgola mobile e both sotto tutti i valori mobili, a sinistra oa destra).Così si può inserire il seguente tra le colonne coppie:

<div class="visible-sm visible-xs" style="clear: both;"></div> 

si otterrà lo stesso effetto, ma con minore complessità, anche se forse non è il modo più bootstrap kosher.