The Mostly Fluid Layout

HTML

<div class="container">
    <div class="box dark_blue"></div>
    <div class="box light_blue"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    <div class="box orange"></div>
</div>

CSS

.container {
    display: flex;
    flex-wrap: wrap;
}

.box {
    width: 100%;
    height: 100px;
}

.dark_blue {
    background-color: #131c58;
}
.light_blue {
    background-color: #3760cb;
}
.green {
    background-color: #12a400;
}
.red {
    background-color: #a40000;
}
.orange {
    background-color: #dd8400;
}

@media (min-width: 450px) {
    .light_blue, .green {
        width: 50%;
    }
}

@media (min-width: 550px) {
    .dark_blue, .light_blue {
        width: 50%;
    }
    .green, .red, .orange {
        width: 33.33333%;
    }
}

@media (min-width: 700px) {
    .container {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}

[Code Download]

[View on GitHub]

[Live Example]