styles.css

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

/*color of each box*/
.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 {
    display: flex;
}

.box{
    flex:1; /*displays content throughtout the width - evenly distribute width(equally)*/
    order:1;
}

/* flexbox ordering */
.box3 {
    order:5; /*places 5 on the 3rd place - try it out
    order:-1; left to right - negative to positive*/

    /* default is order:0;  */
}

.box5 {
    order:7;
}

.box7{
    order:2;
}