Below is the code snippet that generates a Bootstrap page with lorem text and a sidebar. The issue I am facing is that when the browser window size gets smaller, the sidebar appears at the bottom instead of the side. On very small resolutions, it becomes hidden, which is intentional. How can I make it appear on the side when the resolution is medium?
.sidebar-user-box {
padding: 4px;
margin-bottom: 4px;
font-weight: bold;
cursor: pointer;
color: white;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Media Site</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Media Site</a>
<div class="d-flex align-items-center">
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 col-xs-9 pt-3 px-4">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-12" style="background-color: blue;"></div>
<div class="col-md-4 col-sm-4 col-xs-12" style="background-color: white;">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-12" style="background-color: blue;"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-12" style="background-color: darkblue;"></div>
<div class="col-md-4 col-sm-4 col-xs-12" style="background-color: gray;">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate
in?
</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-12" style="background-color: darkblue;"></div>
</div>
</div>
</main>
<nav class="col-lg-2 col-md-3 d-none d-sm-block d-md-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>