Q:

Make a fixed and responsive div

I have this design made using bootstrap there is a left side bar 100% in height. And there is a content area on the left. The left sidebar is fixed using position : fixed so it stays fixed when scrolling down. It's fine on desktop.
However when it's being viewed from mobile the the fixed sidebar goes to the  top like in any other responsive design. Fine. But the content area on the right in desktop comes on top of the sidebar not bottom to it cause the position : fixed. 
How can i fix it? Keep the sidebar fixed in desktop and make it responsive on mobile? 
Sorry i'm being on mobile 
html
<div class='col-md-3' id='sidebar'>Sidebar</div>
<div class='col-md-9'>
content
</div>

css
#sidebar 
{
 height :100%;
 position : fixed;
 }
html,body
 { 
 height : 100%;
 }

A:

Suggestion: use @media queries
@media (max-width: 768px) { /* mobile view */
  #sidebar  {
    position: relative;
    // or any other property to achieve the desired
  }
}

MDN CSS/Media_queries
Css-Tricks Suggested Standard Media Sizes

