The Column Drop Layout

HTML

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

CSS

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

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

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

@media (min-width: 450px) {
    .dark_blue {
        width: 25%;
    }
    .light_blue {
        width: 75%;
    }
}

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

[Code Download]

[View on GitHub]

[Live Example]