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