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?
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
flex-wrap: wrap-reverse
, de otra manera tendrás que añadir order
a cada elemento que quieras agregar.
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>
display:flex
y luego puedes usar la propiedadorder
para cambiar el orden en que se muestranflex-wrap: wrap-reverse
, de otra manera tendrás que añadirorder
a cada elemento que quieras agregar.