List (UL/LI) displayed as grid - responsive (with Bootstrap) - html

Question

Is there any way that I can create a gallery like this
on bootstrap using an unordered list? I've accomplished that look with the column system but I really needed to use li items for this project.
So basically I want to create a list displayed as a grid. And it needs to be responsive as well. I want it turn into a one-column on mobile:
The reason why I want to use ul/li is because I'll be using wordpress and would like to use the wp_list_pages function.
This might be very easy but I just can't think of a solution that doesn't involve workarounds.
Thanks!

Answer 1

This is easier if use CSS Grids:
.gallary{
margin-top:50px;
width:80%;
height:100%;
display: grid;
grid-template-columns: 1fr 0.5fr 1fr;
grid-template-rows: 300px 200px;
}
.area1{
grid-column: 1/2;
grid-row: 1/2 ;
background-color: blue;
}
.area2{
grid-column: 2/4;
grid-row: 1/1;
background-color: yellow;
}
.area3{
grid-column: 1/2;
grid-row: 2/2;
background-color: green;
}
.area4{
grid-column: 2/3;
grid-row: 2/2;
background-color: orange;
}
.area5{
grid-column: 3/4;
grid-row: 2/2;
background-color: purple;
}
#media (max-width: 650px) {
.gallary{
margin-top:50px;
width:100%;
height:100%;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
.area1{
grid-column: 1/-1;
grid-row: 1/2 ;
background-color: blue;
}
.area2{
grid-column: 1/-1;
grid-row: 2/3 ;
background-color: yellow;
}
.area3{
grid-column: 1/-1;
grid-row: 3/4 ;
background-color: green;
}
.area4{
grid-column: 1/-1;
grid-row: 4/5 ;
background-color: orange;
}
.area5{
grid-column: 1/-1;
grid-row: 5/6;
background-color: purple;
}
}
<div class="gallary">
<div class="area1">AAA</div>
<div class="area2">AAA</div>
<div class="area3">AAA</div>
<div class="area4">AAA</div>
<div class="area5">AAA</div>
</div>