* {
    border:0; margin:0; padding:0; box-sizing: border-box;
}

#flex {
    display: flex;
    flex-flow: row wrap;
}

.inner {
    flex: 1 0 33%;
    border: 5px solid darkgrey;
    min-height: 33.33vh;
}

.inner:nth-child(1) {
    background-color: pink;
}

.inner:nth-child(2) {
    background-color: darkkhaki;
}

.inner:nth-child(3) {
    background-color: darkolivegreen;
}

.inner:nth-child(4) {
    background-color: darkorange;
}

.inner:nth-child(5) {
    background-color: darkorchid;
}

.inner:nth-child(6) {
    background-color: darksalmon;
}

.inner:nth-child(7) {
    background-color: darkslateblue;
}

.inner:nth-child(8) {
    background-color: darkturquoise;
}

.inner:nth-child(9) {
    background-color: floralwhite;
}


@media screen and (max-width: 1200px) and (min-width:600px) {
    .inner {
        flex: 1 0 50%;
        min-height: 25vh;
    }

    .inner:last-child {
        display: none;
    }
}

@media screen and (max-width:599px){
    .inner {
        flex: 1 0 50%;
        min-height: 33.33vh;

    }

    .inner:last-child {
        display: none;
    }

    .inner:nth-child(8) {
        display: none;
    }

    .inner:nth-child(7) {
        display: none;
    }
}