Winnipeg

This demo shows how to construct a row of four images that break into two rows of two images each at a certain screen width. Note in the example below, a CSS rule is used to set the width of each of the four images to 25% of the parent element so they all fit on one row, and then a media query is defined that sets the widths of each image to 50% when the screen width is 720px or less, which causes them to wrap into two rows.

<!-- HTML -->
<div class="collage">
<div class="col-4-2"><img src="http://embracebirth.ca/wp-content/uploads/2018/04/38w1c.jpg"></div>
<div class="col-4-2"><img src="http://embracebirth.ca/wp-content/uploads/2018/04/McColl47.jpg"></div>
<div class="col-4-2"><img src="http://embracebirth.ca/wp-content/uploads/2018/02/McColl124-2.jpg"></div>
<div class="col-4-2"><img src="http://embracebirth.ca/wp-content/uploads/2015/11/Helena18.jpg"></div>
</div>

/* CSS */
.collage {
   display: flex;
   flex-wrap: wrap;
   font-size: 0;
}
.col-4-2 {
   display: inline-block;
   width: 25%;
}
@media all and (max-width:720px) {
   .col-4-2 {
      width: 50%;
   }
}

Try adjusting your browser width and see when the row converts from one row of four images to two rows of two images.