Cómo cambiar el orden de Divs con CSS dependiendo de la resolución de pantalla

  • Autor Autor NASH
  • Fecha de inicio Fecha de inicio
N

NASH

Dseda
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Hola.

Quisiera saber cómo harían ustedes para que el orden de unos divs cambie para cierta resolución de pantalla. Me explico:

-Para Desktop: Aquí el Div de Taboola está arriba de todo visualmente

Ver para Desktop

-Para Mobile: Aquí Taboola aparece al último

Ver para Mobile

¿Cómo lo harían ustedes con CSS con CSS?
 
Esto con bootstrap se hace muy fácilmente pero igualmente lo puedes hacer con CSS ocultando los divs según el ancho de pantalla.

Sería así:

DIV 1 ( será visible solo en mobile)

DIV 2 TABOOLA ( será visible en desktop y en mobile)

DIV 3 ( será visible solo en desktop)


De esta forma en escritorio tendrás el div taboola arriba y en mobile abajo.
 
usando propiedades de : FLEXBOX se puede hacer eso, mas especificamente la propiedad "order" que te permite cambiar de o intercambiar las posiciones de los div
 
Igual si hablamos de solo 2 divs.
y al ser publicidad con un alto fijo, puedes usar propiedades como absolute y dandole dimensiones (al menos altura fija) al padre.
 
Hace no mucho tuve este mismo problema, en este caso era para cambiar el orden en el que se mostraban los objetos en una web que al pasar a movil solo mostraba el mapa de google maps.

El código está basado en este, con las correspondientes modificaciones (sacado de stackoverflow):
Insertar CODE, HTML o PHP: 
<div id="div_uno">Soy el primer div</div>
<div id="div_dos">Soy el segundo div</div>

Insertar CODE, HTML o PHP: 
@media (max-width: 300px) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .div_uno {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }

  .container .div_dos {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

Ten en cuenta que da igual el número de divs que tengas, sólo tienes que adaptarlo a tus layout

Lo que hacemos es que para max-width definido indicamos con order en que orden del layout vamos a mostrar los div correspondientes. Esto hace que podamos tener un layout especifico para cada resolución.

¿El problema? que no va a funcionar en Internet Explorer si es una versión antigua... pero para lo que necesitaba, que era que se viera correctamente en móviles funciona muy bien
 
Última edición:
Hola, si usas bootstrap podes usar la clase .col-*-pull-* o push dependiendo de como necesites acomodarlo.
Si es con CSS solo yo sabiendo que es un banner y tiene dimensiones fijas, haria lo que te comentaron de ponerle position absolute, meterlo en un parent con position relative, y agregarle padding al div padre de acuerdo a si va arriba o abajo.


Algo asi:

.div-padre{
position:relative;
padding-top: 450px;
}

.ad-sense{
position: absolute;
top: 0;
width: 300px
height: 400px
}
@ media (max-width: 768px){

.div-padre{
padding-top: 50px;
padding-bottom: 450px;
}

.ad-sense{
top: auto;
bottom: 0;
}

}

Saludos
 
Última edición:
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba