Flexbox grid gallery with bigger images inside

Question

I have to make this layout containing images as a background (images will repeat in the same structure). Is it possible to archieve this using flexbox and such html structure (in responsive way?

.portfolio {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
 }
 
 .portfolio-item {
    position: relative;
    width: 45%;
    padding: 20px;
    margin-bottom: 20px;
    height: 320px;
    background-color: red;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
 }
 
.portfolio-item:nth-child(2n-1) {
    margin-right: 2%;
}

.portfolio-item:first-child {
   height: 670px;
}

.portfolio-item:nth-child(n+6) {
    height: 670px;
}

<div class="portfolio">
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
</div>