Html 移动设备上的Bootsrap 4重叠粘性侧边栏

我正在设计使用Bootstrap4的网站。我想把它添加到右边这个粘糊糊的边栏中。我的总体设想是有两个框-1（内容）和2（边栏）

我成功地为移动设备以外的设备正确放置了盒子。然后对于移动设备，我希望在内容的顶部有侧边栏，所以在1的顶部有2个侧边栏

这部分有点挣扎。正确堆叠它们没有问题。问题是，框2与框1重叠。我不知道如何解决这个问题

我有以下代码

<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>

.内容部分{
最小高度：2000px；
}
.侧边栏项{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.让我粘{
职位：-网络工具包粘性；
位置：粘性；
排名：0；
}
1.
2.

您可以在此处看到演示：

.内容部分{
最小高度：2000px；
}
.侧边栏项{
位置：相对；/*从绝对更改为相对*/
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.让我粘{
职位：-网络工具包粘性；
位置：粘性；
排名：0；
}
1.
2.

   <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>