How can I achieve this kind of layout with Bootstrap 5?

Question

I want to achieve a layout using Boostrap 5 and I'm failing to do so. This is the layout which I want to have: layout example

This is the layout that I have: https://jsfiddle.net/7rpmqsc0/

This is my mark up:

    <div class="row">
        <div class="col-6">
            <div class="row">
                <div class="col-12">
                    <img data-src="https://via.placeholder.com/600x300" class="img-fluid w-100 lazyload" alt="...">
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <img data-src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
                </div>
                <div class="col-6">
                    <img data-src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
                </div>
            </div>
        </div>
        <div class="col-6">
            <img data-src="https://via.placeholder.com/600x600" class="img-fluid w-100 lazyload" alt="...">
        </div>
    </div>

My problem is that I can't achieve a gap between rows where the images meet on the left side. Maybe I am missing something silly but I can't figure it out. Thank you for your help

Answer 1

You can rethink the structure with 2 col side by side where one olds also two columns with the smaller img.:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

<!--left col also styled as a row -->
  <div class="col-6 row">
  
  <!-- first row of that col -->
    <img src="https://via.placeholder.com/600x300" class="img-fluid w-100 lazyload" alt="...">
    
  <!-- second row of that col with 2 col-6 -->
  <div class="col-6 mt-auto">
      <img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
    </div>
    
    <div class="col-6 mt-auto">
      <img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
    </div>
  </div>
  
  <!-- right column -->
  <div class="col-6">
    <img src="https://via.placeholder.com/600x600" class="img-fluid w-100 lazyload" alt="...">
  </div>
  
</div>