Modificare ordine div in modalità mobile

cobra.mi

Modificare ordine div in modalità mobile

Ciao a tutti ho bisogno di un aiuto, ho affiancato due div uno con il testo ed uno con l'immagine, successivamente ho inserito un altro div con immagine e testo messi in modo alternato, il problema è che in mobile non riesco a cambiare l'ordine del div.

In mobile vorrei che fossero in ordine: Testo poi immagine, Testo poi immagine invece ottengo Immagine poi testo, Testo poi immagine in quanto in modalità desktop sono affiancati in modo alternato. Come posso fare?

sito: investigatoremilano . it

Dove ce investigazioni private, aziendali, security e portierato, bonifiche e spy... quella parte di testo e foto messe in alternata.

Grazie a tutti

sideshow

Ciao, io ti consiglio di procedere in senso inverso.
Invece di sistemare testi e immagini e in posizione alternata nell'html e poi spostarle via css, sistemale tutte nello stesso ordine nell'html e poi cambia le posizioni usando il css.
Se scrivi prima il css per mobile e poi le media query per desktop è molto più semplice (esempio sotto), ma puoi fare anche il contrario ovviamente.

Esempio:

[HTML]
<div class="content">

<h2>Sezione con img a destra</h2>

<div class="testo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui eget eros blandit maximus eget id nunc... </p>
</div>

<div class="immagine">
    <img src="img/img-uno.jpg">
</div>

</div>

<h2>Sezione con immagine a sinistra</h2>

<div class="testo dx">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui eget eros blandit maximus eget id nunc... </p></p>
</div>

</div>

</div>
[/HTML]



.esempio {
    margin-bottom: 20px;
    overflow: hidden;
    padding: 40px;
}

.esempio .testo {
    padding-bottom: 20px;
}


@media only screen and (min-width: 1023px) {
    
    .esempio .testo,
    .esempio .immagine {
        width: 48%;
        float: left;
    }

    .esempio .testo {
        margin-right: 4%;
    }
    
    .esempio .testo.dx {
        float: right;
        margin-left: 4%;
        margin-right: 0;
    }

    .esempio .immagine img {
        width: 100%;
        height: auto;
    }    
    
}