Tengo la siguiente estructura de diseño muy elegante en su forma de adaptarse en pantallas muy pequeñas cada columna se vuelve al 100%. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .bg-dark-1 { background-color: #1A1A1A; } .module-1 { display: flex; flex: 1; } .col-cover-five { flex: 1; order: 1; } .col-flex { display: flex; } .col-1 { display: flex; flex: 2; flex-direction: column; } .col-grid { display: flex; flex: 1; flex-direction: column; } .col-text { width: 25%; order: 3; } .text-category { overflow-y: scroll; max-height: 40em; } .date-text h4 { color: rgba(58, 134, 68, 0.9); font-size: .875em; text-transform: uppercase; margin: 0.5em 0; } .date-text ul li { display: block; margin: .5em 0; white-space: normal; } .date-text ul li a { color: #B7B7B7; font-size: .875em; text-decoration: none; } .post { margin: 0.7em; overflow: hidden; } .post-module-x2 { width: 100%; position: relative; display: flex; } .thumbnail-left.max img { max-height: 12em; max-width: 50em; } .post-content-x2 { padding-left: 1em; } /**/ .post-module { overflow: hidden; } .module-width { width: 390px; } .module-full { width: 100%; } .post-module .post-content{ margin-top: -5px; width: 100%; padding: 1em; display: flex; flex-direction: column; align-items: flex-start; min-height: 200px; } .thumbnail img { width: 100%; object-fit: cover; } .pixels-img-x2 img { height: 200px; } .pixels-img-x3 img { height: 300px; } .pixels-img-x35 img { height: 350px; } .post-module .post-content p{ font-size: 13px; margin-bottom: 1.5em; } .post-date img{ width: 40px; height: 40px; object-fit: cover; border-radius: 40px; margin-right: 10px; } .post-module .post-date{ display: flex; align-items: center; margin-top: auto; } .thumbnail { position: relative; } .date { position: absolute; min-width: 48px; min-height: 48px; background-color: #fff; color: #700877; font-size: 18px; font-weight: 700; padding: 10px 0; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; text-align: center; text-transform: uppercase; top: 20px; right: 20px; z-index: 1; } .date * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .date span { display: block; line-height: 14px; } .date .month { font-size: 11px; } .post-date small{ color: #888; } <!-- language: lang-html --> <div class="box module-1 bg-dark-1"> <div class="col-cover-five"> <div class="box col-flex"> <div class="col-1"><div class="post"> <div class="thumbnail"> <div class="date"> <span class="day">22 </span> <span class="month">Nov</span> </div> <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga"> </div> <div class="text-horizontal"> <a href="#"> <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2> </a> <p class="result">La dirigencia " Alba" ya piensa en el 2021</p> <div class="post-date"> <span class="timestamp colr-white2">Justo ahora</span> </div> </div> </div></div><div class="col-grid"><div class="post"> <div class="thumbnail"> <div class="date"> <span class="day">22 </span> <span class="month">Nov</span> </div> <img src="https://i.imgur.com/ZGd83BY.jpg" alt="Salida de jugadores"> </div> <div class="text-horizontal"> <a href="#"> <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2> </a> <p class="result">La dirigencia " Alba" ya piensa en el 2021</p> <div class="post-date"> <span class="timestamp colr-white2">Justo ahora</span> </div> </div> </div><div class="post"> <div class="thumbnail"> <div class="date"> <span class="day">18 </span> <span class="month">Nov</span> </div> <img src="https://i.imgur.com/Wux8vR8.jpg" alt="Liga de Quito con ausencias"> </div> <div class="text-horizontal"> <a href="#"> <h2 class="sub_title colr-yellow2">Liga de Quito con ausencias para enfrentarse a Emelec</h2> </a> <p class="result">Pablo Repetto con problemas al definir su once titular</p> <div class="post-date"> <span class="timestamp colr-white2">Hace 4 días</span> </div> </div> </div></div> </div> </div> <div class="col-text"> <div class="text-category"> <div class="date-text"> <h4>Titulo Principal</h4> <ul> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> </ul> </div> </div> </div> </div> <!-- end snippet --> No obstante lo que deseo lograr es crear unas cuadriculas de 5, a excepción de algunos aspecto del diseño, tener 3 filas de imágenes más pequeñas y las dos más grandes, mediante el uso de flexbox es posible pero no doy con los cambios que se debe realizar para tener el siguiente aspecto: [![introducir la descripción de la imagen aquí][1]][1] >*Nota:* Que los cambios que se deban realizar sea solamente en esta estructura HTML y estilo css <div class="box col-flex"> <div class="col-1"></div> <div class="col-grid"></div> </div> [1]: https://i.sstatic.net/D0Nji.jpg