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">
<div class="esempio">
<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>
<div class="esempio">
<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 class="immagine sx">
<img src="img/img-due.jpg">
</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;
}
}
