*{
    box-sizing: border-box;
}

.box{
    color: white;
    font-size: 100px;
    text-align: center;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.box1{background:#1abc9c;}
.box2{background:#3498db;}
.box3{background:#9b59b6;}
.box4{background:#34495e;}
.box5{background:#f1c40f;}
.box6{background:#e67e22;}
.box7{background:#e74c3c;}
.box8{background:#bdc3c7;}
.box9{background:#2ecc71;}
.box10{background:#16a085;}

.container{
    padding: 0px;
    display: flex;
    border: 10px solid aqua;
    min-height: 100vh;
/* flex-direction: row / row-reverse / column / column-reverse */
    flex-direction: row;
/*  flex-wrap: wrap / no-wrap / wrap-reverse / */
    flex-wrap: wrap;
}
.box{
    /* flex: 1 auto; */
    width: calc(33.33333% - 2%);
    margin: 1%;
    /* box-sizing: border-box; */
    padding: 20px;
    border: 5px solid goldenrod;
}
.box3{
    order: -1;
}
.box7{
    order: 2;
}