Bootstrap 5 & Masonry - Align 1 big picture and 4 small ones

I am new to Bootstrap and would like to make a masonry design with one big picture next to 4 small ones in Desktop view. On mobile the pics shall have the same size and align underneath each other.

This is what I am aiming for: wanted design

And this is what it looks like in Desktop view. Mobile is working fine. current Desktop design

This is my code right now. I am using the masonry-layout as plugin as recommended on the bootstrap homepage. How can I make this work?

<section class="container-xl py-5">
  <div class="row bg-secondary py-3" data-masonry='{"percentPosition": true }'>
    <div class="col-sm-12 col-md-6 py-3">
      <img class="w-100" src="https://picsum.photos/1000" alt="pic1">
    </div>
    <div class="col-sm-12 col-md-3 py-3">
      <img class="w-100" src="https://picsum.photos/1000" alt="pic2">
    </div>
    <div class="col-sm-12 col-md-3 py-3">
      <img class="w-100" src="https://picsum.photos/1000" alt="pic3">
    </div>
    <div class="col-sm-12 col-md-3 py-3">
      <img class="w-100" src="https://picsum.photos/1000" alt="pic4">
    </div>
    <div class="col-sm-12 col-md-3 py-3">
      <img class="w-100" src="https://picsum.photos/1000" alt="pic5">
    </div>
  </div>
</section>

Solution

Here you go...

See the snippet below.

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>

</head>

<body>

  <section class="container-xl py-5">
    <div class="row bg-secondary py-3" data-masonry='{"percentPosition": true }'>
      <div class="col-sm-12 col-md-6">
        <div class="col-sm-12 col-md-12 py-3">
          <img class="w-100" src="https://picsum.photos/1000" alt="pic2">
        </div>
      </div>
      <div class="col-sm-12 col-md-3">
        <div class="col-sm-12 col-md-12 py-3">
          <img class="w-100" src="https://picsum.photos/1000" alt="pic2">
        </div>
        <div class="col-sm-12 col-md-12 py-3">
          <img class="w-100" src="https://picsum.photos/1000" alt="pic3">
        </div>
      </div>
      <div class="col-sm-12 col-md-3">
        <div class="col-sm-12 col-md-12 py-3">
          <img class="w-100" src="https://picsum.photos/1000" alt="pic4">
        </div>
        <div class="col-sm-12 col-md-12 py-3">
          <img class="w-100" src="https://picsum.photos/1000" alt="pic5">
        </div>
      </div>
    </div>
  </section>

</body>

</html>