/*style_reset*/
body{
    margin: 0;
    padding: 0;
}

.flex_container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Safari */
    display: -webkit-flex;
    -webkit-align-content: space-between;
    -webkit-align-items: center;
}
.box{
    padding: 20px;
    border: 1px solid #f00;
    width: 150px;
}
.box_1{
    height: 120px;
}
.box_2{
    height: 100px;
}
.box_3{
    height: 40px;
}
.box_4{
    height:200px;
    border-color: #00f;     /* I think the #00f should be the color -.-*/
}

/*width less than 640px*/

@media screen and (max-width: 640px) {
    .flex_container{
        align-items: flex-start;
        flex-flow: row wrap;
        /* Safari */
        -webkit-align-items: flex-start;
        -webkit-flex-flow: row wrap;
    }
    .box_4{
        -webkit-order:-1;   /* Safari */
        order: -1;
        margin-bottom: 20px;
    }
}