Using this basic 2 column layout, where the left one is fluid and the right is fixed, can someone please help me grasp how I can make the right column go under the left one when the screen width is reduced beyond a point, such as on small tablets and phones, using CSS? The main thing I want to keep from what I have is that when they are next to eachother, that the columns have an equal height, which in this case is achieved with display:table-cell.

HTML Code:
<style type="text/css">
#box {
display:table; 
width:80%;
margin:0 auto;
}
.column {
display:table-cell;
background:#ccc;
padding:0 20px;
}
.two {
background:#999;
width:20em;
}
</style> 
<h1>Testing column/grids</h1>
<div id="box">
    <div class="column">
		Main column
	</div>
    <div class="column two">side bar</div>
</div>