'Nested columns always stack?

I am trying to use bootstrap 5.1 to achieve a responsive layout, but don't get the expected outcome. I have two columns I want to be adjacent in large screens and stacked in small screens. The first column is further subdivided by two (nested) columns; one with the title and one with three buttons. I would like these to stack in large screens (i.e. buttons below title) and position adjacent in small screens (i.e. buttons next to title). Instead, the nested columns always stack. What am I doing wrong? fiddle: fiddle

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 
  <title>TITLE</title>
 </head>
 <body>
  <div class="container-fluid">
   <div class="row">
    <div class="hidden-sm col-md-1 col-lg-2"></div>
    <div class="col-sm-12 col-md-10 col-lg-8">
     <div class="row">
      <div class="col-xs-12 col-sm-5"> 
       <div class="row">
        <div class="col-xs-6 col-sm-12">
         <h4>TITLE</h4>
        </div>
        <div class="col-xs-6 col-sm-12">
         <button type="button" class="btn active btn-danger btn-block">1</button>
         <button type="button" class="btn active btn-success btn-block">2</button>       
         <button type="button" class="btn active btn-danger btn-block">3</button>       
        </div>
       </div>
      </div>
      <div class="col-xs-12 col-sm-7">
       <div id="clock" style="background-color:black; height:5rem;">&nbsp &nbsp</div>
      </div>
      <div class="hidden-sm col-md-1"></div>
     </div>  
    </div>
   </div>
  </div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 </body>
</html>

nested

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Nested columns always stack?

Sources

Related Questions