Bootsrap 4 overlapping sticky sidebar on mobile - html

Question

I am working on design of the website that's using Bootstrap 4. I wanted to add to this sticky sidebar on the right. My general vision was to have two boxes - 1 (content) and 2 (sidebar).
I managed to place boxes correctly for devices except mobile. Then for mobile I wanted to have sidebar on top of content, so 2 on top of 1.
This part is a bit of a struggle. There is no problem in stacking them correctly. Problem is the fact, that box 2 is overlapping 1. And I am not sure how to fix this.
I have following code
<style>
.content-section {
min-height: 2000px;
}
.sidebar-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.make-me-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
</style>
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<div class="content-section card card-body">
<div>1</div>
</div>
</div>
<div class="col-md-4 order-first order-md-last">
<div class="sidebar-item">
<div class="make-me-sticky">
<div class="card card-body">2</div>
</div>
</div>
</div>
</div>
</div>
You can see demo here:
https://www.codeply.com/go/IiDkjH70EY

Answer 1

<style>
.content-section {
min-height: 2000px;
}
.sidebar-item {
position: relative; /* Change From absolute TO relative */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.make-me-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
</style>
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<div class="content-section card card-body">
<div>1</div>
</div>
</div>
<div class="col-md-4 order-first order-md-last">
<div class="sidebar-item">
<div class="make-me-sticky">
<div class="card card-body">2</div>
</div>
</div>
</div>
</div>
</div>