Kevin Powell - Community•2y ago

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 and 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;
        
    }