Patrones de maquetación Responsive: Layout shifter CSS

Este patrón inicia también vertical, sin embargo, en la medida de que cambia el tamaño de pantalla hacia un ancho más amplio, se comienzan a distribuir unos bloques dentro de otros contenedores padre que se pueden posicionar para brindar un layout diferente.

Platzi.com

Ejemplo

Documento HTML

<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Css Shifter</title>    <link rel="stylesheet" href="./style.css"></head><body>    <main class="container">        <div class="c1"></div>        <div class="c4">            <div class="c2"></div>            <div class="c3"></div>        </div>        <div class="c5"></div>    </main></body></html>

Documento CSS

* {    box-sizing: border-box;    margin: 0;    padding: 0;}html {    /* Para utilizar rem */    font-size: 62.5%;}.container {    display: flex;    /*Para que el contenido se puedan reposicionar en caso de que el tamaño lo permita en la medida que aumente el tamaño de pantalla*/    flex-wrap: wrap;}.c1, .c2, .c3, .c4, .c5{    width: 100%;    min-width: 150px;    height: 150px;}.c4 {    height: auto;}.c1{    background-color: orangered;}.c2{    background-color: blueviolet;}.c3{    background-color: greenyellow;}.c4{    background-color: red;}.c5{    background-color: blue;}/* Breakpoint 600px */@media (min-width: 600px){    .c1 {        width: 25%;    }    .c4{        width: 75%;    }    .c5{        width: 100%;    }}/* Breakpoint 600px */@media (min-width: 800px){    .container {        width: 800px;        margin: 0 auto;    }    .c1 {        width: 50%;        order: 1;    }    .c4{        width: 100%;    }    .c5{        width: 50%;        order: 2;    }}