I want to merge two cells together in the proposed html layout - html

Question

I'm using this layout and as you can see there is a section with 8 pictures on the bottom of the page - each of them is a hyperlink to the bigger image. It works pretty neat, esp. when you resize the page to smaller size, then the 4 cells becomes 2 and it looks like this. I want to change it a little, so that two first pictures are merged together, so the layout could look like this, and when the user resizes it, it would show him a proper layout like this. So far the html code for that specific part of the page looks like this:
<section class="screenshots" id="screenshots">
<div class="container-fluid">
<div class="row">
<ul class="grid">
<li>
<figure>
<img src="img/02-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/02.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>User Centric Design</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/03-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/03.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Responsive and Adaptive</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/04-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/04.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Absolutely Free</p>
</a>
</div>
</figcaption>
</figure>
</li>
</ul>
</div>
<div class="row">
<ul class="grid">
<li>
<figure>
<img src="img/06-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/06.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Exclusive to Codrops</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/07-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/07.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Made with Love</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/08-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/08.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>In Sydney, Australia</p>
</a>
</div>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</section>
and the css code looks like this:
/* ==========================================================================
Screenshots Intro
========================================================================== */
.screenshots-intro {
padding: 170px 0 100px 0;
background-color: #f6f7f9;
}
.screenshots-intro h1 {
margin-bottom: 20px;
color: #24374b;
font-weight: 400;
font-size: 22px;
}
.screenshots-intro p {
margin-bottom: 25px;
color: #778899;
}
/* ==========================================================================
Screenshots
========================================================================== */
.screenshots ul {
margin: 0;
padding: 0;
width: 100%;
}
.screenshots ul li {
float: left;
min-height: 100%;
width: 25%;
background-color: #000;
list-style: none;
}
.screenshots figure {
position: relative;
overflow: hidden;
}
.screenshots figure img {
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.screenshots figure:hover img, .screenshots figure:focus img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.screenshots figcaption {
position: absolute;
top: 0;
left: 0;
padding: 25% 0;
width: 100%;
height: 100%;
background-color: rgba(63, 97, 132, 0.85);
text-align: center;
font-size: 15px;
opacity: 0;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.screenshots figcaption a {
color: #fff
}
.screenshots figcaption a:hover, .screenshots figcaption a:focus {
color: #73d0da
}
.screenshots figure:hover figcaption, .screenshots figure:focus figcaption {
opacity: 1
}
.visible {
opacity: 1
}
.screenshots figure.cs-hover figcaption {
opacity: 1
}
.screenshots figcaption i {
font-size: 35px
}
.screenshots figcaption p {
margin-bottom: 0;
text-transform: uppercase;
font-weight: 400;
}
.screenshots figcaption .caption-content {
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -100px;
width: 200px;
-webkit-transform: translate(0px, 15px);
-ms-transform: translate(0px, 15px);
transform: translate(0px, 15px);
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.screenshots figure:hover figcaption .caption-content, .screenshots figure:focus figcaption .caption-content {
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
I know it's a lot of code, but maybe anyone of you have the idea of how to change this particular part of the layout to have it as I included in the pictures? Thanks.

Answer 1

This is the updated answer.
I am attaching the code and jsfiddle link with it.
Just replace the src of the images with yours to see the results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.container {
width: 100%;
margin: 0 auto;
}
img {
max-width: 100%;
}
/* this css is just for understanding */
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
.d {
background-color: black;
}
/* this css is just for understanding */
/* this is the logic to change the positions of image */
#media (min-width: 320px) {
.a,
.b,
.c,
.d {
width: 100%;
float: left;
}
}
#media (min-width: 768px) {
.a,
.b,
.c,
.d {
width: 50%;
float: left;
}
}
</style>
<body>
<div class="container">
<div class="a">
<img src="img/1.png" height="222" width="581">
</div>
<div class="b">
<img src="img/2.jpg" height="222" width="581">
</div>
<div class="c">
<img src="img/3.jpg" height="222" width="581">
</div>
<div class="d">
<img src="img/4.png" height="222" width="581">
</div>
</div>
</body>
</html>
this is the jsfiddle link