Amanite Laurine Amanite Laurine - 6 months ago 14
CSS Question

how to do responsive with css grid and reversed order of elements

I have an html code with two éléments and I would like to invert them on responsive, like so :

enter image description here

Is it possible in css or must I do it in js ?
(sorry if bad english)

Answer

You can use display flex and order like this:

<div class="container">
   <div>element 1</div>
   <div>element 2</div>
</div>

.container{
   display:flex;
   flex-direction: column;
 }


 .container div:nth-child(1){
   order:2;
 }

 .container div:nth-child(2){
   order:1;
 }

//change the 1024px for you desktop size target
@media (min-width:1024px){

 .container div:nth-child(1){
   order:1;
 }

 .container div:nth-child(2){
   order:2;
 }
}

Hope it helps