property - Reordenación de div con CSS

order property

Question

¿Alguien sabe de algún ejemplo o tutorial sobre cómo lograr lo siguiente:

En el escritorio, el diseño será:

En dispositivos móviles, el diseño cambiará a:

Como puede ver, quiero que el cuadro 2 y el cuadro 3 reordenen e intercambien posiciones en el dispositivo móvil

¿Alguien tiene algún consejo o consejo?

Answer 1

Para lograr esto, sugiero reordenar su marcado.

Un ejemplo:

<div class="wrap">
    <div class="div-1">1</div>
    <div class="div-3">3</div>
    <div class="div-2">2</div>
</div>

Y el CSS

.div-1,
.div-2,
.div-3 {
    width: 50px;
    height: 50px;
    float: left;
    position: relative;
}

.div-2 {
    right: 33%;
}

.div-3 {
    left: 33%;
}

@media screen and (max-width: 640px) {
    .div-1,
    .div-2,
    .div-3 {
        width: 100%;
        left: auto;
        right: auto;
    }
}

Un ejemplo: https://jsfiddle.net/umq3w14p/

Alternativa, podrías usar flexbox!

Answer 2

Una respuesta súper simple sin marcos, etc. Cambia el diseño original colocando el tercer div en el segundo lugar y haciéndolo flotar hacia la derecha. Los otros dos divs a la izquierda. Una vez en el móvil, simplemente cambia el flotador.

HTML

 <div id="container">
   <div id="one">Div 1</div>
   <div id="three">Div 3</div>
   <div id="two">Div 2</div>
</div>

CSS

html, body
{
    padding:0;
    margin:0;
}

#container
{
    width:100%;
    height:auto;
    margin:0 auto;
    padding:0;
}

#one, #two ,#three
{
    width:32%;
    margin:0.6666%;
    padding:0;
    height:200px;
    display:block;
}

#one, #two
{
    float:left;
}
#three
{
    float:right;
}

#one{
    background:green;
}
#two
{
    background:blue;
}
#three
{
    background:red;
}


@media screen and (max-width: 480px)
 {
    #one, #two, #three
    {
        width:100%;
        margin:5px 0;
        display:block;
    }

    #two
    {
        float:left;
    }
}

Manifestación

Answer 3

flexbox puede hacer eso muy fácilmente

.wrap {
  display: flex;
}
.box {
  height: 150px;
  border: 1px solid green;
  flex: 1;
  margin: 25px;
  text-align: center;
  line-height: 150px;
  font-size: 36px;
}
.box:first-child {
  order: 1;
}
.box:nth-child(2) {
  order: 2;
}
.box:nth-child(3) {
  order: 3;
}
@media screen and (max-width: 760px) {
  .wrap {
    flex-direction: column;
  }
  .box:nth-child(2) {
    order: 3;
  }
  .box:nth-child(3) {
    order: 2;
  }
}

<div class="wrap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Demo Codepen

Answer 4

Dependiendo de qué navegadores necesite admitir, podría usar el flex-box . Con una consulta de medios para el tamaño de pantalla, puede establecer el order de los segundos y terceros cuadros para cambiar debajo de un cierto ancho de pantalla.

He hecho un bolígrafo con un pequeño ejemplo. También recomendaría la Guía completa de CSS para trucos de Flexbox, que habla sobre cómo usar flex mejor que yo.

EDITAR:

El principio básico sería establecer el elemento padre (por ejemplo, contenedor) para display: flex ; esto genera el flexbox y le permite establecer diferentes parámetros para los niños.

Usando el siguiente HTML:

<div class="container">
  <div class="box first">
    Box 1
  </div>
  <div class="box second">
    Box 2
  </div>
  <div class="box third">
    Box 3
  </div>
</div>

Si configuro display:flex on .container , puedo establecer si el contenido debe mostrarse en una fila o columna, debe envolver una línea, tener espacio entre los elementos, etc. He establecido que la regla principal sea una fila de envoltura usando flex-flow (que es una abreviatura de otras dos propiedades de flexión, incluida flex-direction que necesito más adelante), con espacio entre los elementos.

.container{
  display:flex;
  flex-flow: row wrap;
  justify-content:space-between;
}

Luego utilizo una consulta de medios para que cuando el navegador sea más estrecho que un ancho especificado, la flex-direction cambie de una row a otra

@media screen and (max-width:600px){
  .container {
    flex-direction:column
  }
 }

Luego, en la misma consulta de medios, necesito decirles a los elementos que deseo volver a ordenar en qué orden deberían estar:

@media screen and (max-width:600px){
  .container {
    flex-direction:column
  }
  .second{
    order: 3;
  }
  .third{
    order: 2
  }
}

A veces he notado que el order debe definirse para todos los elementos, por lo que puede necesitar configurarlo para el primer bloque y mantenerlo como order: 1 . Desde la pluma vinculada a arriba, no parece ser el caso aquí, pero es algo a tener en cuenta en otros proyectos.

Answer 5

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body { 
  font-family: ''Open Sans'', sans-serif;
  color: #666;
}

/* STRUCTURE */

#pagewrap {
 padding: 5px;
 width: 960px;
 margin: 20px auto;
}
header {
 height: 100px;
 padding: 0 15px;
}
#content {
 width: 290px;
 float: left;
 padding: 5px 15px;
}

#middle {
 width: 294px; /* Account for margins + border values */
 float: left;
 padding: 5px 15px;
 margin: 0px 5px 5px 5px;
}

#sidebar {
 width: 270px;
 padding: 5px 15px;
 float: left;
}
footer {
 clear: both;
 padding: 0 15px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
 
 #pagewrap {
  width: 94%;
 }
 #content {
  width: 41%;
  padding: 1% 4%;
 }
 #middle {
  width: 41%;
  padding: 1% 4%;
  margin: 0px 0px 5px 5px;
  float: right;
 }
 
 #sidebar {
  clear: both;
  padding: 1% 4%;
  width: auto;
  float: none;
 }

 
}

/* for 700px or less */
@media screen and (max-width: 600px) {

 #content {
  width: auto;
  float: none;
 }
 
 #middle {
  width: auto;
  float: none;
  margin-left: 0px;
 }
 
 #sidebar {
  width: auto;
  float: none;
 }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

 
 #sidebar {
  display: none;
 }

}


#content {
 background: #f8f8f8;
}
#sidebar {
 background: #f0efef;
}
#content, #middle, #sidebar {
 margin-bottom: 5px;
}

#pagewrap, #content, #middle, #sidebar {
 border: solid 1px #ccc;
}

<div id="pagewrap">

 
  
 <section id="content">
  <h2>1st Content Area</h2>
  <p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p>
 </section>
 
 <section id="middle">
  <h2>2nd Content Area</h2>
  <p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p>
  
 </section>

 <aside id="sidebar">
  <h2>3rd Content Area</h2>
  <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
  
  <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
 </aside>
 


</div>