Responsive Sidebar

Here you have a quick example code I created. http://jsfiddle.net/jtorrescr/CNf8Q/ as mentioned by Kade Keithy, you need to play with your @media to determine in what screen resolution you want to change your layout. So just reset what you are using to create your aside in the @media.

HTML

<div id="container">    <div id="header">        Header    </div>       <div id="content">        Content    </div>     <div id="sidebar">        sidebar    </div>    <div id="footer" class="clearfix">        footer    </div></div>    

CSS

#sidebar{    height:60px;    background-color:orange;    top:0;    right:0;}#sidebar{    width:20%;    height: 360px;    float:right;    margin-top:-360px;}#header, #content{    width:80%;}#header{    height:60px;    background-color:pink;}#content{    height:300px;    background-color:yellow;}#footer{    height:60px;    background-color:green;    width:100%;}@media (max-width: 500px) {        #container    {        width:100%;    }    #sidebar    {        width:100%;        height:60px;        float:none;        margin-top:0;    }    #header, #content    {        width:100%;    }}

For this you can use media queries. They allow you to conditionally apply css based on screen size.

Here is an example:

@media (min-width: 700px) {      .content {    float: left;  }    }

So what you would likely do is change the float of the sidebar based on screen size.

I recommend this guide for more info: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design