Bootstrap 4 - Grid 1 and 2 Change position - html

Question

Example what i need:
Image:
My code is this:
<div class="container">
<div class="row">
<div class="col-3">
<img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
</div>
<div class="col-6">
<img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Belgrade">
</div>
<div class="col-3">
<img src="image1.png" class="img-thumbnail float-right" alt="Niš">
</div>
</div>
<!-- THIS IS PROBLEM -->
<div class="row">
<!-- THIS COLUMN NEED TO BE BELOW 1 COLUMN / LEFT SIDE -->
<div class="col-3">
<img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
</div>
<!-- THIS COLUMN NEED TO BE BELOW 3 COLUMN / RIGHT SIDE -->
<div class="col-3 ml-auto">
<img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
</div>
</div>
<!-- END PROBLEM -->
<div class="row">
<div class="col-4">
<img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
</div>
<div class="col-4">
<img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Novi Sad">
</div>
<div class="col-4">
<img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
</div>
</div>
</div>
I can't figure where is the problem. If someone know where problem is, write solution. Thanks
PS. Sorry for my Bad english
Thanks All..

Answer 1

Edit: I've updated my answer to include background images, and to mimic the original layout better. Thanks to AndreiGheorghiu for help answering this more accurately.
.grid{
display: grid;
grid-gap:10px;
height:500px;
grid-template-columns: 1fr .2fr 1fr .2fr 1fr;
grid-template-areas: "topLeft large large large topRight"
"midLeft large large large midRight"
"bottomLeft bottomLeft bottomCenter bottomRight bottomRight";
}
.pic{
background: url(https://placeimg.com/400/400/any) no-repeat center/cover;
font: 700 20px sans-serif;
color:white;
display:flex;
align-items:center;
justify-content:center;
text-shadow:2px 2px 5px #000;
}
.pic-1{
grid-area: topLeft;
}
.pic-2{
grid-area: large;
}
.pic-3{
grid-area: topRight;
}
.pic-4{
grid-area: midLeft;
}
.pic-5{
grid-area: midRight;
}
.pic-6{
grid-area: bottomLeft;
}
.pic-7{
grid-area: bottomCenter;
}
.pic-8{
grid-area: bottomRight;
}
<div class="grid">
<div class="pic pic-1">Foxwoods</div>
<div class="pic pic-2">New York City</div>
<div class="pic pic-3">Las Vegas</div>
<div class="pic pic-4">Philadelphia</div>
<div class="pic pic-5">San Francisco</div>
<div class="pic pic-6">Miami</div>
<div class="pic pic-7">Boston</div>
<div class="pic pic-8">Washington D.C.</div>
</div>

Answer 2

You can try this code,
Note: Included responsive classes. Run this code as a full page
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
</div>
<div class="col-md-6">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Belgrade">
</div>
<div class="col">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Niš">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
</div>
</div>
<div class="row mt-md-4">
<div class="col-md-4">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
</div>
</div>
</div>

Answer 3

You need to put the small images in the same col. And display them as blocks: display:block; width: 100%; height: auto;.
Here's how I'd personally do it. I'm using .no-gutter class on .rows and white borders on images:
[my-gallery]:not(#_) {
padding: 8px;
}
[my-gallery] img {
display: block;
background-color: #f5f5f5;
width: 100%;
height: auto;
border: 8px solid white;
}
[my-gallery] .strethed img {
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" my-gallery>
<div class="row no-gutters">
<div class="col">
<img src="https://picsum.photos/300/200/?random" alt="Novi Sad">
<img src="https://picsum.photos/303/202/?random" alt="Novi Sad">
</div>
<div class="col-6 strethed">
<img src="https://picsum.photos/306/204/?random" alt="Belgrade">
</div>
<div class="col">
<img src="https://picsum.photos/309/206/?random" alt="Niš">
<img src="https://picsum.photos/312/208/?random" alt="Novi Sad">
</div>
</div>
<div class="row no-gutters" >
<div class="col">
<img src="https://picsum.photos/315/210/?random" alt="Novi Sad">
</div>
<div class="col">
<img src="https://picsum.photos/318/212/?random" alt="Novi Sad">
</div>
<div class="col">
<img src="https://picsum.photos/321/214/?random" alt="Novi Sad">
</div>
</div>
</div>