Rearrange HTML display order using CSS floats

by audetwebdesign

HTML

<!DOCTYPE>
<div class="yellow">
</div>
<div class="red">
</div>

CSS

.yellow {
	background: yellow;
	width: 20%;
	height: 300px;
	float:left;
}

.red {
	background: red;
	width: 20%;
	height: 300px;
	float:left;
}

@media screen and (max-width:600px) {
	.yellow {
		background: yellow;
		width: 100%;
		height: 300px;
		float:left;
        margin-top: 300px;
	}

	.red {
		background: red;
		width: 100%;
		height: 300px;
		float:left;
        margin-left: -100%;
	}
}