.JS code

$(document).ready(function() {
    var list = $('.wrapper1');
    var boxList = $('.wrapper1').find('*');

    $($('.wrapper1').find('*')).click(function(event) {
        $(this).insertBefore($(boxList[0]));

    });
    $("#box5").click(function(event) {
        $(this).hide("slow");
        alert('opps you loost a box! :)');
    });
    $('#reverse').click(function(event) {
        list.append(boxList.get().reverse());
    });
});
        

.CSS code

#top_header{
    background: lightgray;
    text-align: center;
    border: 3px solid black;
    padding: 10px;
    margin: 40px;
}
.wrapper{
    border:2px solid black;
    width: 1000px;
    height: 370px;
    margin-left: 150px;
}
.wrapper1{
    border:2px solid black;
    width: 1000px;
    height: 370px;
    margin-left: 150px;
}
#mommy{
    margin: auto;    
    display:-webkit-box;
    -webkit-box-orient: horienzontal;       
    -webkit-box-align: center;
    -webkit-box-pack: center;    
    /*centrerer childrens inde i mommyboxen*/
    /*-webkit-box-direction: reverse;*/ 
    /*vender rækkefølgen af childrens om 4-->1*/
}
#daddy{
    margin: auto;
    display:-webkit-box;
    -webkit-box-orient: horienzontal;
    -webkit-box-align: center;
    -webkit-box-pack: center;    
    /*centrerer childrens inde i mommyboxen*/
    /*-webkit-box-direction: reverse;*/ 
    /*vender rækkefølgen af childrens om 4-->1*/
}
#kid1{
    text-align: center;
    border: 2px solid red;
    background: green;
    padding: 20px;
    margin: 20px;
    -webkit-box-ordinal-group: 1; 
    /*angiver placeringen i rækkefølgen*/
    -webkit-box-flex: 1;
    height: 100px;
    background: -webkit-linear-gradient(90deg, green, yellow);
    background: -webkit-radial-gradient(center, circle, green 25%, yellow 75%);
}
#kid2{
    text-align: center;
    border: 2px solid red;
    background: yellow;
    padding: 20px;
    margin: 20px;
    -webkit-box-ordinal-group: 2;
    -webkit-box-flex: 1;
    height: 100px;
    opacity: 0.2;
}
#kid3{
    text-align: center;
    border: 2px solid red;
    background: red;
    padding: 20px;
    margin: 20px;
    -webkit-box-ordinal-group: 3;
    -webkit-box-flex: 1; 
    height: 100px;
}
#kid4{
    text-align: center;
    border: 2px solid red;
    background: orange;
    padding: 20px;
    margin: 20px;
    -webkit-box-ordinal-group: 4;
    -webkit-box-flex: 1;
    height: 100px;
}
#kid5{
    text-align: center;
    border: 2px solid red;
    background: blue;
    padding: 20px;
    margin: 20px;
    -webkit-box-ordinal-group: 5;
    -webkit-box-flex: 1;
    height: 100px;  
}
#kid6{
    text-align: center;
    border: 2px solid red;
    background: purple;
    padding: 20px;
    margin: 20px;
    -webkit-box-ordinal-group: 6;
    -webkit-box-flex: 1;
    height: 100px;
}
p{
    text-align: center;
}
#box1{
    text-align: center;
    border: 2px solid red;
    background: green;
   padding: 20px;
    margin: 20px;
    width: 24%;
    height: 100px;
    float: left;
}
#box2{
    text-align: center;
    border: 2px solid red;
    background: yellow;
    padding: 20px;
    margin: 20px;
    width: 24%;
    height: 100px;
    float: left;
}
#box3{
    text-align: center;
    border: 2px solid red;
    background: red;
    padding: 20px;
    margin: 20px;
    width: 24%;
    height: 100px;
    float: left;
}
#box4{
    text-align: center;
    border: 2px solid red;
    background: orange;
    padding: 20px;
    margin: 20px;
    width: 24%;
    height: 100px;
    float: left;
}
#box5{
    text-align: center;
    border: 2px solid red;
    background: blue;
    padding: 20px;
    margin: 20px;
    width: 24%;
    height: 100px;
    float: left;
}
#box6{
    text-align: center;
    border: 2px solid red;
    background: purple;
    padding: 20px;
    margin: 20px;
    width: 24%;
    height: 100px;
    float: left;
}
#reverse{
    font: bold 30px Century Gothic;
    text-shadow: rgb(110,110,110) 5px 5px 5px;
}