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.
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; }}