Make right column go under on small screens

HTML & CSS
1

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.

<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>
2

Here’s a basic example of how you can do it:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reflow</title>
<style type="text/css">
@media only screen and (min-width: 700px) {
	#box {
	display:table; 
	width:80%;
	margin:0 auto;
	}
	.column {
	display:table-cell;
	background:#ccc;
	padding:0 20px;
	}
	.two {
	background:#999;
	width:20em;
	}
}

@media only screen and (max-width: 700px) {
        #box { 
	width:80%;
	margin:0 auto;
	}
	.column {
	width: 100%;
	}
}
</style> 
<meta name="viewport" content="width=device-width">
</head>
<body>

<h1>Testing column/grids</h1>
<div id="box">
    <div class="column">
		Main column
	</div>
    <div class="column two">side bar</div>
</div>
</body>
</html>

If you want a fallback for older browsers (IE8 and under), this is better:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reflow</title>
<style type="text/css">
        #box { 
	width:80%;
	margin:0 auto;
	}
	.column {
	width: 100%;
	}

@media only screen and (min-width: 700px) {
	#box {
	display:table; 
	width:80%;
	margin:0 auto;
	}
	.column {
	display:table-cell;
	background:#ccc;
	padding:0 20px;
	}
	.two {
	background:#999;
	width:20em;
	}
}


</style> 
<meta name="viewport" content="width=device-width">
</head>
<body>

<h1>Testing column/grids</h1>
<div id="box">
    <div class="column">
		Main column
	</div>
    <div class="column two">side bar</div>
</div>
</body>
</html>
3

Thanks, I’m figuring out how to use @media now.

4

For now I have been using a single stylesheet, and at the end of it I have

@media only screen and (max-width: 700px)

and then do things like resetting paddings and format for mobile and small screens (usually going to a single column). Is there a way to use @import or something so that a desktop user with more than 700px screen width doesn’t need to download the “mobile” code? I tried using

@import url(mobile.css) (max-width:700px);

where mobile.css contains what was previously under the @media query, but my phone (opera mobile on HTC) isn’t downloading it (but my desktop does when I make the window thin enough)

EDIT:actually it doesn’t work on my desktop either

5

Instead of having everything in one style sheet, you can link to separate style sheets in the head of your document like so:

<link type="text/css" rel="stylesheet" href="main.css" media="screen,projection,tv">

<link type="text/css" rel="stylesheet" href="mobile.css" media="screen and (max-width:700px)">