Commutazione dell'ordine di elementi HTML quando il layout cambia in Responsive Web Design

Question

Sto creando un sito Web reattivo e, per una buona esperienza utente, ho bisogno di alcune modifiche al layout da mobile a desktop. Nello specifico, ho bisogno di cambiare l'ordine di alcuni elementi HTML.

Ho bisogno che gli elementi HTML siano in un ordine diverso per desktop vs mobile.

mobile

<div class="one">One</div> 
<div class="two">Two</div> 
<div class="three">Three</div> 

Ordinare acceso per Desktop

<div class="one">One</div> 
<div class="three">Three</div> 
<div class="two">Two</div> 

Questo è semplificata versione di quello che voglio realizzare. Penso che si chiami progressive enhancement. In che modo gli esperti di web design spostano elementi html? Con JavaScript? Sarebbe normale? Ci sono plugin jQuery?

Answer 1

Basta utilizzare jQuery per modificare il DOM intorno come richiesto

if (mobile == true) { 

    $('div.three').insertBefore($('div.two')); 
} 

Answer 2

È possibile farlo jQuery ciò che devi fare è controllare il dispositivo e inserirlo in base ad esso

anche il suo bene leggere web design reattivo dove si impara cose del genere controllare questo qustion Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

ho trovato qui buoni consigli e anche controllare questo

1. Beginner’s Guide to Responsive Web Design
2. Responsive Web Design

Answer 3

A seconda del formato ci sarà un certo numero di modi per raggiungere tale obiettivo. Se i tuoi div sono accatastati fianco a fianco sul desktop e verticalmente sul dispositivo mobile, potresti essere in grado di utilizzare una combinazione di float e query multimediali per farli visualizzare nell'ordine corretto.

In caso contrario, il fallback finale potrebbe essere la creazione di 4 div.

<div>one</div> 
<div>three(mobile)</div> 
<div>two</div> 
<div>three(desktop)</div> 

Quindi utilizzare le query multimediali per nascondere il relativo "tre" div a seconda del dispositivo.

Answer 4

codice seguente impilare il div in mobile e sul tavolo sarebbe un layout di colonna 2

<div class="main"> 

</div> 
<div class="aside"> 
</div> 

<style type="text/css"> 
    @media only screen and (min-width: 768px) { 
     .main {float:right;width:60%} 
     .aside {float:left;width:40%} 
    } 
</style> 

Answer 5

Prova con: visualizzazione: flettere; direzione flex: colonna;

Maggiori informazioni qui: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Answer 6

Resurrecting questa domanda perché mi sono imbattuto in via google, e le risposte esistenti sono obsoleti. La soluzione che ho usato è stata la only one with the downvote, quindi ci lavorerò sopra.

Utilizzando display:flex vi permetterà di riordinare gli elementi utilizzando le proprietà column/column-reverse:

.container{ display:flex;flex-direction:column } 
@media screen and (min-width:600px) { 
    .container{ flex-direction:column-reverse } 
} 

Vedere la JSFiddle here, e alcuni tavoli di supporto here.

controllare anche un paio di CSS postprocessori here e here