<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<img src="https://loremflickr.com/320/240" />
</div>
<div class="col">
<div class="col mb-4">
<img src="https://loremflickr.com/320/240" />
</div>
<div class="col">
<img src="https://loremflickr.com/320/240" />
</div>
</div>
</div>
</div>
</body>
</html>
I want them to be arranged in the same row, one photo on the left and two photos on the right on top of each other. Like in this image.
You can set the first image to fill the width of the container with the class
w-100
since it currently has the dimensions320*240
, and the height with the classh-100
.Although it would be better to have an image with higher resolution and with a size according to what you want.