Responsive 3 column

HTML

<div class="section group">
	<div class="col span_1_of_3">
	1 of 3
	</div>
	<div class="col span_1_of_3">
	1 of 3
	</div>
	<div class="col span_1_of_3">
	1 of 3
	</div>
</div>
<div class="section group">
	<div class="col span_1_of_3">
	1 of 3
	</div>
	<div class="col span_1_of_3">
	1 of 3
	</div>
	<div class="col span_1_of_3">
	1 of 3
	</div>
</div>

CSS

.header { padding: 1em 0 }



.col { background: #ccc; padding: 1em 0; text-align: center }
.section { clear: both; padding: 0px; margin: 0px }
.group:before, .group:after { content: ""; display: table }
.group:after { clear: both }
.group { zoom: 1 }
.col { display: block; float: left; margin: 1% 0 1% 1.6% }
.col:first-child { margin-left: 0 }
@media only screen and (max-width:480px) {
	.col { margin: 1% 0 1% 0% }
}
.span_3_of_3 { width: 100% }
.span_2_of_3 { width: 66.13% }
.span_1_of_3 { width: 32.26% }
@media only screen and (max-width:480px) {
	.span_3_of_3 { width: 100% }
	.span_2_of_3 { width: 100% }
	.span_1_of_3 { width: 100% }
}