[Boostrap] Gestire il riordinamento delle colonne della pagina

mr.php

[Boostrap] Gestire il riordinamento delle colonne della pagina

Buongiorno a tutti,
sto lavorando a un nuovo progetto web, che dovrà avere un layout responsivo e per questo motivo ho deciso di avvalermi del framework boostrap. Ora il layout che ho progettato è a tre colonne (sinistra,centrale,destra), e su schermi desktop si presenta in questo modo:

h t t p : / / s1.postimg.org/83u3kdvcf/schem_1.png

Quando riduco le dimensioni della finestra, le colonne si impilano e anche gli elementi al suo interno fanno la stessa cosa, ottenendo il seguente risultato:

h t t p : / / s21.postimg.org/adlabz27b/fig_2.png

Ecco, il problema è proprio questo. Io vorrei che quando il sito viene visualizzato sui dispositivi mobile(o tablet, o comunque risoluzioni ridotte), le colonne laterali si allineassero in orizzontale al di sopra della colonna centrale(e che gli elementi all'interno). Praticamente ambisco ad avere il seguente risultato:

h t t p : / / s30.postimg.org/aj0un1qv5/fig_3.png

Purtroppo, dopo svariati tentativi, non sono riuscito ad ottenere il risultato sperato.

Il codice(semplificato) è questo:

[HTML]

<body>

</div>
</div>

</body>

[/HTML]

In attesa di una eventuale risposta

Buona domenica a tutti

shad

Spostato nella sezione più adeguata.

simo90

Allora per prima cosa, con il codice html che hai scritto il risultato da mobile non viene come in figura due.
Inoltre in figura 3 cambi completamente l'ordine del flusso delle colonne. Da col_sx, col_cx, col_dx passi a col_dx, col_sx, col_cx.
Ecco il codice che dovresti utilizzare:

[HTML]
<div class="container">
<div class="row">

<div class="col-sm-2 visible-xs-block">  
  Col-dx 
</div>

<div class="col-sm-2 ">
  Col_sx 
</div>

<div class="col-sm-8">
  Col_cx
</div>

<div class="col-sm-2 hidden-xs">
  Col_dx
</div>

</div>
</div>
[/HTML]

In questo Modo da schermi maggiori a 768px vedrai il secondo box(hidden-xs), mentre da schermi minori a 768px vedrai il primo box(visible-xs-block).
Inoltre per tenere gli elementi interni in riga devi dare la classe col-xs-*.

mr.php

Grande, grazie mille!