• User

    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


  • User

    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;
        }    
        
    }