1

si tengo 2 div de la siguiente forma

<div class="uno"></div>
<div class="dos"></div>

como hago para invertirlos con css?, sin usar position:absolute. que quede así

<div class="dos"></div>
<div class="uno"></div>

se puede?

2
  • 1
    Hay varias formas, lo más facil es con flexbox. Necesitas un contenedor para los div con display:flex y luego puedes usar la propiedad order para cambiar el orden en que se muestran
    – user7176
    Commented el 7 may. 2019 a las 15:26
  • Lo más limpio sería utilizar la propiedad flex-wrap: wrap-reverse, de otra manera tendrás que añadir order a cada elemento que quieras agregar.
    – user128841
    Commented el 19 may. 2019 a las 11:11

2 respuestas 2

6

la única forma de darles orden con css es usando la propiedad flex para el contenedor de estos elementos

.flex {
  display: flex;
}

.flex > * {
  order: 0;
  border: 1px solid black;
  margin: 0px 2px;
}

.uno {
 order: 1;
}

.dos {
 order: 2;
}
<div class="flex">
  <div class="uno">elemento A</div>
  <div class="dos">elemento B</div>
  <div>elemento C</div>
</div>

te dejo un vínculo con un tutorial de flex

Tutorial Flex CSS

3
  • 1
    no es la única aunque si la más fácil y seguramente la mejor. De hecho yo propuse una alternativa en una pregunta similar en SO: stackoverflow.com/a/38008866/4994625
    – user7176
    Commented el 8 may. 2019 a las 8:23
  • ciertamente no es la única manera, pero las soluciones alternativas son aquellas que juegan con las propiedades de css para llegar a esos resultados lo que lleva a tener hojas de estilos un poco difíciles de leer e innecesariamente largas, cuando llegó flexbox fue para solucionar este tipo de problemas triviales y darle un orden. La solución "oficial" es flexbox y se insta a dejar de usar las soluciones alternativas
    – LPZadkiel
    Commented el 9 may. 2019 a las 15:07
  • 1
    Exactamente @LPZadkiel, repetición de código, redundancias y demás trivialidades solo ensucian código. La mejor alternativa en mi opinión sería utilizar la propiedad flex-wrap: wrap-reverse, de otra manera tendrás que añadir order a cada elemento que quieras agregar.
    – user128841
    Commented el 19 may. 2019 a las 11:13
1

Te recomiendo la propiedad flex-wrap: wrap-reverse, puesto que hace el contenido más dinámico, si he entendido bien el uso que quieres hacer del comportamiento, como el orden de creciente a decreciente, comentarios más recientes primero, etcétera. De la otra manera tendrás que ir agregando el orden a cada elemento que creas y es un fastidio, ya que cuando tienes cientos de líneas de código, cuanto más simple sea mejor.

.container {
  display: flex;
  flex-flow: row wrap-reverse
}

.container > * { width: 100% }

.foo { background-color: #ff3b30 }

.bar { background-color: #4cd964 }

.baz { background-color: #007aff }
<div class="container">
  <div class="foo">foo</div>
  <div class="bar">bar</div>
  <div class="baz">baz</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.