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.
