DIV Versione Mobile

[ildandiii]

Salve, sto creando un sito wordpress in locale con il visual composer ed avrei un problema con la home page...

Ho creato:
- testo a sinistra e immagine a destra
- immagine a sinistra e testo a destra
- testo a sinistra e immagine a destra
-immagine a sinistra e testo a destra
https://preview.ibb.co/mqOtpn/web.jpg

il problema è che nella versione mobile mi mette la sequenza:
- testo, immagine, immagine, testo, testo, immagine, immagine, testo
https://preview.ibb.co/dYeSFS/mobile.jpg

invece io vorrei:
- testo, immagine, testo, immagine, testo, immagine
https://preview.ibb.co/b6fTN7/mobileok.jpg

come risolvo? grazie mille

[KillerWorm]

Ciao, non conosco e non uso visual composer ma normalmente in un layout responsive si hanno dei breakpoint CSS con cui poter applicare le varie regole in modo differente a seconda delle dimensioni del viewport. Immagino che funzioni così anche nel tuo elaborato, però bisognerebbe capire come sono stati impostati tali breakpoint, in particolare se è un'impostazione del tipo "mobile first" o "desktop first".

Nel primo caso, sul codice HTML definisci l'impaginazione così come dovrebbe apparire su mobile, quindi nei breakpoint (relativamente alle dimensioni maggiori del viewport, desktop o quello che è, vedi tu) vai ad applicare, per esempio, un float:right per gli elementi TESTO in modo alternato.

Per impostare una regola sugli elementi in modo alternato potresti definire una classe che metterai manualmente sui rispettivi elementi a cui vuoi applicare tale allineamento oppure usare, per esempio, il selettore :nth-child(even) che dovrà essere definito opportunamente in modo da selezionare gli elementi in questione.

In alternativa, se usi bootstrap ci sono già a disposizione delle classi che, ad esempio, invertono l'ordine delle colonne e che puoi definire giusto per una particolare dimensione attraverso gli appositi prefissi.

Chiaramente questo è ciò che dovresti fare in linea di massima; non sapendo come è impostato la cosa non è possibile risponderti in modo preciso. Se ti servono risposte mirate ti consiglio di postare il codice in questione (quantomeno le parti di codice interessate) e/o, possibilmente, un link ad una pagina pubblica.