/ / reorganice el orden de las columnas div según la tableta o el teléfono del dispositivo. zurb foundation 4 - zurb-foundation

reorganice el orden de las columnas div según la tableta o el teléfono del dispositivo. zurb foundation 4 - zurb-foundation

Estoy usando el framework zurb foundation 4. El siguiente sitio de prueba se ve bien en la vista de escritorio para mí. En la vista de escritorio, tengo en el lado izquierdo: columnas grandes-7 (cuadro de texto de contenido gris); en el lado derecho: tengo: 5 columnas grandes (imagen 1 verde e imagen 2 azul). Por favor ayúdame con el ejemplo de código exacto. En la vista de tableta y teléfono, me gustaría reorganizar el orden de las columnas de div para: imagen 1 caja verde primero, y luego debajo de ella está el cuadro de texto de contenido gris, y luego debajo está la imagen 2 caja azul. Por favor ayúdame con el ejemplo de código exacto. ¡Muchas gracias de antemano!

Aquí está la vista previa de lo que tengo hasta ahora: http://www.endsnore.com/_test1/marketing5.html

Aquí hay un ejemplo de lo que quiero que suceda en la vista de tableta y teléfono: http://www.endsnore.com/_test1/images/_delete14.jpg

Respuestas

2 para la respuesta № 1

No puede tener ese diseño sin hacer javascript o jquery. No hay ninguna solución de css incorporada o incluso javascript de Foundation que lo haga por usted.

Puedes probar esta solución. Primero necesitas tener un diseño como este:

   <div class="row">
<div class="small-12 columns show-for-small" id="topContent"></div>
<div class="large-7 small-12 columns panel">1st column</div>
<div class="large-5 small-12 columns panel">
<div id="img1" class="panel">img1</div>
<div id="img2" class="panel">img2</div>
</div>
</div>

Y luego tiene este script para mover la primera imagen en la parte superior:

$(document).foundation();
$(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});

Tenga en cuenta que el script solo funciona en la carga dela página y no al cambiar el tamaño del navegador, no creo que lo necesite de todos modos. Pero por la razón que sea, simplemente encierre la lógica de "ancho" en una función de cambio de tamaño, algo así como:

$(window).resize(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});