Responsive webpage layout/skeleton. CSS3 only

style.css

/*# Layout*/
.container {
    width: 980px;
    margin: 0 auto;
}
header {
    height: 36px;
    background-color: #fded5c;
}

.content {
    width: 100%;
    display: table;
}
    .left_col {
        width: 150px;
        display: table-cell;
        background: #a7dffc;
    }
    main {
        width: 100%;
        display: table;
    }
        .middle_col_wrap {
            /*float: left;*/
            display: table-cell;
        }
            .middle_col_top {
                height: 80px;
                background-color: #53adf8;
            }
            .middle_col_wrap_in {
                display: table;
                width: 100%
            }
                .middle_col_left {
                    height: 378px;
                    display: table-cell;
                    background-color: #a3ff62;
                }
                .middle_col_right {
                    display: table-cell;
                    width: 200px;
                    background-color: #376f04;
                }
        .right_col {
            width: 210px;
            display: table-cell;
            /*float: right;*/
            background-color: #ee7439;
        }

footer {
    height: 36px;
    background-color: #bababa;
}

/* Tablet landscape */
@media only screen and (max-width: 980px) {
    .container {
        width: 100%;
    }
    .middle_col_wrap {
        display: block;
    }
    .right_col {
        display: block;
        width: 100%;
        height: 140px;
    }
}

/* Tablet portrait */
@media only screen and (max-width: 800px) {
    .container {
        width: 100%;
    }
    .middle_col_wrap {
        display: block;
    }
        .middle_col_wrap_in { 
            display: flex;
            flex-direction: 
            column-reverse; 
        }
            .middle_col_left { display: block; }
            .middle_col_right {
                display: block;
                height: 100px;
                width: 100%;
            }
    .right_col {
        display: block;
        width: 100%;
        height: 140px;
    }
}

/* Mobile */
@media only screen and (max-width: 640px) {
    .container { width: 100%; }
    .left_col { display: none; }
    .middle_col_wrap { display: block; }
        .middle_col_wrap_in { 
            display: flex;
            flex-direction: 
            column-reverse; 
        }
            .middle_col_left { display: block; }
            .middle_col_right {
                display: block;
                height: 100px;
                width: 100%;
            }
    .right_col { 
        display: block;
        width: 100%;
        height: 140px;
    }
}