affix overlapping in bootstrape

I have divided the column in two parts and set the first column to be fix using affix property of Bootstrape. For desktop it is working fine but for smaller device content is overlapping. is there way to fix this issue ?

<div class="row">
   <div class="col-lg-3 col-sm-12"  data-spy="affix">
     <div class="row">
        <div class="col-md-10 col-md-offset-2" >
            <p>My Content </p>
        </div>
     </div>
</div>
<div class="col-lg-8 col-lg-offset-3 col-sm-12" style="border-left: solid gray 2px;">
     <p>this is test test <p>
</div>