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%.
.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;
}
<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>
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:
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>
Media queries
y haciendo el respectivo diseño en css para cada unamedia queries
es para que esta sea responsiva pero ya mi código ya está, solo deseo agregar un diseño distintos a las 4 columnas.