How to make flexbox grid images responsive

I am trying to create a flexbox grid with images that have different widths and heights which i want to behave responsive when shown on different screen sizes. I have the grid now, but i do not know how to make it responsive. I have tried to apply responsive classes within bootstrap to the current layout but without any luck. I have also tried masonry, but it did not solve my problem.

So the question is, how do i make this responsive and is it even the right approach?

HTML

<div class="flex_container">
  <div class="flex_group__1">
    <img src="holder.js/460x670" />
    <img src="holder.js/460x408" />
  </div>
  <div class="flex_group__2">
    <img src="holder.js/645x813">
    <img src="holder.js/645x265">
  </div>
  <div class="flex_group__3">
    <img src="holder.js/808x330"/>
    <div class="flex_group__3_inner_bottom">
      <img src="holder.js/452x748"/>
      <img src="holder.js/356x748"/>
    </div>
  </div>
</div>

CSS

.flex_group__1, .flex_group__2, .flex_group__3, .flex_group__3_inner_bottom, .flex_container {
  display: flex;
}

.flex_container {
  flex-direction: row;
}

.flex_group__3 {
  flex-direction: row wrap;
  justify-content: flex-end;
}

.flex_group__1, .flex_group__2, .flex_group__3 {
  flex-direction: column;
}

.flex_container * {
  border: 1px solid;
}
img {
  max-width: 100%;
}