Cambiar el orden de los elementos HTML cuando el diseño cambia en Responsive Web Design

Question

Estoy creando un sitio web receptivo, y para una buena experiencia de usuario, necesito algunos cambios de diseño de un dispositivo móvil a otro. Específicamente, necesito cambiar el orden de algunos elementos HTML.

Necesito que los elementos HTML estén en un orden diferente para el escritorio en comparación con el móvil.

móvil

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

Orden de encendido de escritorio

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

Esto se simplifica versión de lo que quiero lograr. Creo que se llama progressive enhancement. ¿Cómo los expertos en diseño web mueven los elementos html? Con JavaScript? ¿Sería normal? ¿Hay algún complemento jQuery?

Answer 1

sólo tiene que utilizar jQuery para cambiar el DOM como se requiere en torno

if (mobile == true) { 

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

Answer 2

Usted puede hacer esto mediante jQuery lo que hay que hacer es comprobar el dispositivo e insertar según se

también su buena para leer diseño web receptivo, donde aprenderá cosas por el estilo que mira esto qustion Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

he encontrado aquí buenos consejos y también comprobar esta

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

Answer 3

Dependiendo de su diseño habrá un número de maneras de lograr esto. Si sus divs se apilan una al lado de la otra en el escritorio y verticalmente en el móvil, es posible que pueda usar una combinación de flotantes y consultas de medios para que se muestren en el orden correcto.

Si no, su última alternativa podría ser crear 4 divs.

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

A continuación, utilice consultas de medios para ocultar los "tres" DIV correspondientes según el dispositivo.

Answer 4

siguiente código se acumulará el div en el móvil y en el escritorio sería un diseño de la columna 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

Pruebe con: pantalla: flexionar; flex-direction: column;

Más información aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Answer 6

Resurrecting esta pregunta porque me encontré con él a través de Google, y las respuestas existentes no están actualizados. La solución que terminé usando fue only one with the downvote, así que me extenderé más.

Usando display:flex le permitirá volver a ordenar los elementos que utiliza las propiedades column/column-reverse:

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

Ver el jsFiddle here, y algunas mesas de apoyo here.

También puedes ver un par de CSS post-procesadores here y here