[SOLVED] How to responsively order right side blocks to top and bottom of left side block with bootstrap

How to responsively order right side blocks to top and bottom of left side block with bootstrap

I have the mobile design of three blocks:

 _
|A|
|_|
|B|
|_|
|C|
|_|

I want to achive the following responsive md design with bootstrap5 grid system.

 ___
|B|A|
| |_|
| |C|
|_|_|

I've tried different approaches, 3 rows, rows in rows, ordering etc. but I can't figure out the responsive solution, without redundancy.

Solution

Here you go...

#a,
#b-desktop,
#b-mobile,
#c {
  border: 1px solid red;
  font-size: 50px;
  font-weight: 700;
}

.container-fluid>.row {
  height: 100vh;
}

#b-desktop {
  height: 100%;
}

#b-mobile {
  height: 50vh;
}

#a {
  height: 50vh;
}

#c {
  height: 50vh;
}

<!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>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 d-md-block d-none" id="b-desktop">B</div>
      <div class="col-md-6">
        <div class="row">
          <div class="col-12" id="a">A</div>
          <div class="col-12 d-md-none d-block" id="b-mobile">B</div>
          <div class="col-12" id="c">C</div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>