I want to show lists under sidebar div - html

Question

I'm coding a project listing page in bootstrap and I'm stuck with an issue.I have a sidebar with a fixed height where I list the checkboxes and I have a main container beside the sidebar which lists the product. By default the area under the sidebar is empty. default style
Is there anyway I can list the products under the sidebar as shown in this
I want to show lists under sidebar and all the items should be in a single row
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
aside {
background: #ddd;
}
.row {
align-items: flex-start;
}
.col-sm-4 {
padding-bottom: 25px;
}
img{
max-width: 100%;
}
ul {
list-style: none;
padding-left: 5px;
}
<div class="container">
<div class="row">
<aside class="col-sm-3">
<ul>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
</ul>
</aside>
<main class="col-sm-9">
<div class="row">
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
</div>
</main>
</div>
</div>

Answer 1

see code below (here is fiddle:https://jsfiddle.net/7q9hkrcb/)
#import url('//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
aside {
background: #ddd;
}
body{
margin-top:20px
}
.row {
align-items: flex-start;
}
.col-sm-6 {
padding-bottom: 25px;
}
.col-sm-4 {
padding-bottom: 25px;
}
img{
max-width: 100%;
}
ul {
list-style: none;
padding-left: 5px;
}
<div class="container">
<div class="row">
<aside class="col-sm-4">
<ul>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
<li>Checkbox</li>
</ul>
</aside>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-6">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-6">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-6">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-6">
<img src="http://via.placeholder.com/150x150">
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="col-sm-4">
<img src="http://via.placeholder.com/150x150">
</div>
</div>
</div>
</div>
</div>