Common Responsive Patterns

Mostly Fluid

Layout Shifter

Column Drop

Off Canvas

Column Drop

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

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

.box {
    width: 100%;
}

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

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

Mostly Flud

<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>

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

.box {
    width: 100%;
}

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

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

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

Layout shifter

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

/* 450px */
.container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.box {
    width: 100%;
}

/* 500px */
@media screen and (min-width: 500px) {
    .dark_blue {
        width: 50%;
    }
    #container2 {
        width: 50%;
    }
}

/* 600px */
@media screen and (min-width: 600px) {
    .dark_blue {
        width: 25%;
        order: 1;
    }
    #container2 {
        width: 50%;
    }
    .red {
        width: 25%;
        order: -1;
    }
}

Off Canvas

<nav id="drawer" class="dark_blue"> <!-- a hamberger menu -->
</nav>

<main class="light_blue">
</main>

<script>
    menu.addEventListener('click', function(e) {
        drawer.classList.toggle('open');
        e.stopPropagation();
    });
</script>

html, body, main {
    height: 100%;
    width: 100%;
}

nav {
    width: 300px; // it doesn't overflow the viewport
    height: 100%;
    position: absolute;
    /* This trasform moves the drawer off canvas. */
    -webkit-transform: translate(-300px, 0);
    transform: translate(-300px, 0); // -300px to move it off the screen
    /* Optionally, we animate the drawer. */
    transition: transform 0.3s ease; // it animates in nicely
}

nav.open {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

/* 600px */
@media screen and (min-width: 600px) {
    nav {
        position: relative;
        transform: translate(0,0);
    }
    body {
        display: felx;
        flex-flow: row nowrap;
    }
    main {
        width: auto;
        flex grow: 1; // the main element allows the element 
                        to grow and take up the full remaining width of the viewport
    }
}