3 replies

Need help with Order for display flex

Order is used to change to position of the child elements in a flex box. i tried the same but its not quite the same. there is a main div location-jokes container which has

display:flex

display:flex

and

flex-direction:column

flex-direction:column

properties . Now i wanted to reverse the order of childs so i used following order to change the position, the child position is changed but the grandchildren position is affected by this, how to fix it, so only child position is moved ? i have attached the code and ss for better understanding

    .location-jokes :first-child {
        order: 2;
        margin: 1rem 0;
       
    }

    .location-jokes :nth-child(2) {
        order: 1;
        margin: 1rem 0;
        
    }

    .location-jokes :first-child {
        order: 2;
        margin: 1rem 0;
       
    }

    .location-jokes :nth-child(2) {
        order: 1;
        margin: 1rem 0;
        
    }

https://codepen.io/avinash-tallapaneni/pen/ExRomwX

CodePenAvinash-Tallapaneni

Basketball scoreboard

...

KP-C

Kevin Powell - Community•3y ago•

3 replies

Avinash

Need help with Order for display flex

Order is used to change to position of the child elements in a flex box. i tried the same but its not quite the same. there is a main div location-jokes container which has

display:flex

display:flex

and

flex-direction:column

flex-direction:column

    .location-jokes :first-child {
        order: 2;
        margin: 1rem 0;
       
    }

    .location-jokes :nth-child(2) {
        order: 1;
        margin: 1rem 0;
        
    }

    .location-jokes :first-child {
        order: 2;
        margin: 1rem 0;
       
    }

    .location-jokes :nth-child(2) {
        order: 1;
        margin: 1rem 0;
        
    }

https://codepen.io/avinash-tallapaneni/pen/ExRomwX

CodePenAvinash-Tallapaneni

Basketball scoreboard

...

Need help with Order for display flex

Similar Threads

Need help with Order for display flex

Similar Threads

Similar Threads

Similar Threads