如何使页面的一部分不可滚动（在移动视图上没有重叠）

Question

我创建的网页主要分为两个div垂直，我只希望页面的右侧（id为#rightside的div）可以滚动。

我设法通过设置z-index，position，top，left，right等的值来实现这一目标，但问题是内容的右侧（#rightside）开始在将窗口调整为较小的移动设备视图时，重叠在内容左侧（#leftide）上。

如何阻止#rightside覆盖#leftide？

以下是html的一部分：

<div class="jumbotron">      
    <div class="row">

        <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5" id="leftside">
            <h1>H1 Title</h1>
            <p class="roles">roles</p>
            <img src="">
            <p class="fulldescription">description text</p>
            <p class="fulldescription">description text</p>
            <img src="" class="circleIcon">
        </div> <!-- end of leftside -->


        <div class="col-xs-12 col-sm-7 col-md-7 col-lg-7" id="rightside">
            <img src="" width="1127" class="scaling">
            <img src="" width="1127" class="scaling">
        </div> <!-- end of rightside -->

   </div> <!-- end of the main row -->
</div> <!-- end of the main jumbotron -->

以下是css的一部分：

#leftside{
    margin-top: 12px;
    height:auto;
    text-align: left;
    padding: 50px 90px 0px 100px; /*top right bottom left*/

    z-index: 1;
    position: fixed;
    top: 50px;
    left:15px;

}

#rightside{
    margin-top: 12px;
    height:auto;    
    background:#FCF;
    text-align: left;
    padding-left:0px;
    padding-right:0px;

    z-index: 2;
    position: absolute;
    right: 0px;

}

编辑：为了让您更容易理解，这就是我尝试创建的网站。 example site

在将窗口调整为移动视图的大小时，内容的右侧位于内容的左侧下方。但我现在得到的是右侧内容放在左侧内容的顶部，完全覆盖它。