Premessa: per me ogni scoperta equivale un po’ all’acqua calda, quindi sono felice di condividere la mia acqua con te, che magari potresti ritenerla tiepida o fresca.. Bando alle ciance, cominciamo!

Partiamo con ordine

Stavo sviluppando un sito in bootstrap per un’azienda, quando ad un certo punto mi sono trovata di fronte ad un muro (immaginario, ovviamente 😀 ): l’obiettivo era quello di descrivere i servizi, con la parte di testo a sinistra ed una foto a destra e così via per tutti i servizi offerti. In sintesi, dovevo trovare un metodo semplice per affiancare testo ed immagine in bootstrap. Ho pensato allora di creare un container dove inserire due colonne, una con il testo ed una con l’immagine.

Per non rendere pesante alla vista la sezione, ho deciso quindi di seguire una sorta di zig-zag del tipo:

SERVIZI

1 SERVIZIO
TESTO – IMMAGINE

2 SERIVZIO
IMMAGINE – TESTO

3 SERVIZIO
TESTO – IMMAGINE

Dov’è il problema? Te lo spiego subito.
Nel momento in cui andavo a visualizzare il sito da mobile, mi si presentava:

SERVIZI

1 SERVIZIO

TESTO

IMMAGINE 1 SERVIZIO

IMMAGINE 2 SERVIZIO

2 SERVIZIO

Nooo! Del secondo servizio vedevo prima l’immagine relativa e poi il testo :( ! Disastro! Potevo accontentarmi, sì, ma non era quello che volevo realizzare.

Chiedendo al mio angelo del web ed a Google, ho scoperto le colonne push e pull di bootstrap. Questi termini permettono di modificare l’ordinamento dei contenitori rispetto alle colonne che abbiamo creato in precedenza. Quindi, da mobile, dopo aver applicato in maniera corretta i termini push e pull alle relative colonne, visualizzo:

SERVIZI

1 SERVIZIO

TESTO

IMMAGINE 1 SERVIZIO

2 SERVIZIO

IMMAGINE 2 SERVIZIO

Missione compiuta!

Come utilizzare i termini pull & push

Normalmente, per creare un container con due colonne, una che contiene testo ed una che contiene l’immagine, si creano due div differenti all’interno di uno principale. Nel primo si pone la colonna che conterrà il testo e nel secondo la colonna che conterrà l’immagine, in questo modo:

<div class="row">
<div class="col-xs-12 col-md-7">
<h3>SERVIZIO_1</h3>
<p>TESTO_SERVIZIO_1</p>
</div>
<div class="col-xs-12 col-md-5">
<img class="img-responsive" src="FOTO_SERVIZIO_1">
</div>
</div>

La visualizzazione da mobile sarà la classica, prima il testo e dopo l’immagine.

Vediamo ora il codice che utilizza le colonne pull e push. Push si applica all’elemento che da PC vedremo a destra, ma che da mobile si sposterà in alto e quindi verrà visionato per primo. Pull, in questo caso, si applicherà quindi all’immagine che vedremo per prima a sinistra da desktop, ma che si sposterà sotto il contenitore del testo una volta visualizzato il sito da mobile. Il codice è il seguente:


<div class="row">
<div class="col-xs-12 col-md-push-5 col-md-7">
<h3>SERVIZIO_2</h3>
<p>TESTO_SERVIZI_2</p>
</div>
<div class="col-xs-12 col-md-pull-7 col-md-5">
<img class="img-responsive" src="FOTO_SERVIZI_2">
</div>
</div>

Ricorda che in qualsiasi ordine tu voglia avere testo ed immagine, dovrai sempre scrivere prima il codice relativo al testo e poi quello per l’immagine.

In questo modo potrai controllare l’ordine delle colonne in base alla visualizzazione PC o mobile. I termini vanno applicati alla classe md (medium device) ed eventualmente lg (large device).

Ecco un esempio:

Micio 1

Snoopy in macchina

snoopy_car

Micio 2

Snoopy in braccio

snoopy_love

 

Spero di esserti stata utile e di essermi spiegata in maniera comprensibile, anche se a volte non mi capisco neanche io stessa.. Nel caso avessi bisogno di ulteriori spiegazioni o informazioni, scrivimi e cercherò di risolvere i tuoi dubbi!

Buona impaginazione :)

Shares