How can I nest Bootstrap grid properly without wrapping columns?

I want to make a grid of 8 cols left and 4 columns right. In the 4 columns in the right, I wish to further split it up to 4 cols and 8 cols. It is important that the grid does not wrap.

This is my html:

<div class="container">
  <div class="row">
    <div class="col-sm-8 col-md-8">
      A
    </div>
    
    <div class="col-sm-4 col-md-4">
      <div class="col-sm-4 col-md-4">
        B
      </div>
      
      <div class="col-sm-8 col-md-8">
        C
      </div>
    </div>
  </div>
</div>

unfortunately, C displays under B which I do not want. How is it possible to stop the grid wrapping underneath, please?

You just need to use another row container for the nested column.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  border: 1px solid black;
}

<!-- language: lang-html -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
    <div class="row">
       <div class="col-sm-8 col-md-8">
       A
       </div>
       <div class="col-sm-4 col-md-4">
         <div class="row">
           <div class="col-sm-4 col-md-4">
           B
           </div>
           <div class="col-sm-8 col-md-8">
           C
           </div>
         </div>
       </div>
    </div>
</div>

<!-- end snippet -->