Responsive issue with fixed bootstrap sidebar - html

Question

I have taken two divs say "Panel1" and "Panel2" where Panel1 is having property affix (hard-coded in HTML so have to forcefully apply position:relative on other screen sizes) attached to it in HTML with col-md-3 and Panel2 is col-md-8.
Now the problem is I have to apply left value of around 25% for my Panel2 to align as per Panel1 otherwise it goes beneath it but doing this has broken responsiveness. The design breaks on all other screen sizes and just violates the purpose of using bootstrap for responsive design. (I have to use header and footer from original design and creating a dashboard based on that).
What would be the approach to design without writing and managing screen sizes again manually so that, all I use is bootstrap and design should work on low rez screens.
HTML:
<!-- DASHBOARD SECTION STARTS (Bootstrap Components) -->
<div class="container-fuild dash-panel">
<div class="row">
<div class="col-md-3 left-panel" data-spy="affix">
<ul class="dash-items">
<li class="dash-li"><a class="list-links" href="index.html"><!-- <img class="profile-image" src="../images/ad.jpg" alt=""> -->Profile</a></li>
<li class="dash-li"><a class="list-links" href="my-ads.html">My Advertisements</a></li>
<li class="dash-li"><a class="list-links" href="fav-ads.html">My Favouraite Advertisments</a></li>
<li class="dash-li"><a class="list-links" href="reported-ads.html">Reported Advertisments</a></li>
</ul>
</div>
<div class="col-md-8 right-panel">
<img class="profile-image" src="../images/ad.jpg" alt="">
<div class="profile-info">
<p class="profile-detail-para"><label>Name: </label>John Doe</p>
<p class="profile-detail-para"><label>Email: </label>doejohn#xyz.com</p>
<p class="profile-detail-para"><label>Summary: </label><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt natus dicta assumenda, velit quae officia accusantium explicabo similique possimus veniam illo, dolor delectus saepe quis in eveniet voluptatem adipisci, repudiandae.</span><span>Veritatis at saepe labore explicabo, voluptas asperiores unde accusantium tempore harum, numquam porro doloremque aliquid assumenda. Maiores voluptates aliquid dicta autem commodi eveniet voluptas exercitationem ut, hic laborum laudantium veritatis.</span></p>
<p class="profile-detail-para">
<a class="profile-edit" href="edit-info.html">Edit info <i class="fa fa-edit"></i></a>
</p>
</div>
</div>
</div>
</div>
<!-- DASHBOARD SECTION ENDS -->
Overridden CSS
/* Contains custom css for dashboard */
#import url(https://fonts.googleapis.com/css?family=Montserrat|Dosis);
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
background: #1D1D1D none repeat scroll 0px 0px;
}
.dash-panel{
padding-top: 1%;
padding-bottom: 1%;
height: 480px;
}
.left-panel{
background: #000;
margin-right: 4%;
height: 100%;
left: 5%;
}
.dash-items{
list-style: none;
margin-left: -10%;
}
.dash-li{
margin-top: 2px;
padding: 3%;
}
.dash-li:hover{
background: #3F3030;
}
.list-links{
text-decoration: none !important;
color: #F0B101;
font-family: 'Montserrat', sans-serif;
}
.list-links-profile{
text-decoration: none !important;
color: #F0B101;
font-family: 'Montserrat', sans-serif;
margin-left: -20%;
}
.right-panel{
background: #000;
padding: 2%;
margin-left: 32.4%;
}
.right-panel-2{
background: #000;
padding: 2%;
left: 24%;
}
.profile-image{
max-width: 100%;
width: 100px;
height: 100px;
border-radius: 100%;
float: left;
}
.profile-info{
float: left;
margin-left: 2%;
font-family: 'Dosis', sans-serif;
background: #1D1D1D;
width: 80%;
padding: 2%;
}
.profile-detail-para{
margin-bottom: 2%;
}
.set-BG{
background: #1D1D1D;
}
.listing-image{
width: 180px;
}
.profile-edit{
background: #D7DFE6;
padding: 1%;
color: #000;
}
/* Status */
.pub{
color: #369536;
}
.pen{
color: #D13D3D;
}
/* Status Ends */
.edit-profile{
font-family: 'Open Sans', sans-serif;
padding: 2%;
}
.text-area{
background-color: transparent;
border: 1px solid #464646;
border-radius: none !important;
color: #B8B8B8;
height: 40px;
padding: 5px 10px;
width: 100%;
box-shadow: none;
}
input[type=file]{
background: #000;
}
.submit-btn{
width: 15%;
background: #000;
border: 1px solid #E1B101;
}
#media (max-width: 768px) {
.left-panel {
position: relative;
left: 1.5%;
width: 34%;
float: left;
}
.right-panel{
left: 0%;
float: right;
}
.right-panel-2{
left: 0%;
}
.profile-info{
left: 0%;
}
}
#media (max-width: 480px) {
.left-panel {
position: relative;
left: 1.5%;
float: none;
}
.right-panel{
left: 0%;
float: none;
}
.right-panel-2{
left: 0%;
}
.profile-info{
left: 0%;
}
}
/* #media (max-width: 900px) {
.left-panel {
position: relative;
left: 1.5%;
}
.right-panel{
left: 0%;
}
.right-panel-2{
left: 0%;
}
.profile-info{
left: 0%;
}
} */