3 Column Responsive CSS (Ordering Contents Positions)

[Boogeyman]

Im wondering is there any way to order the contents position when the screen size is reduced to 480 or lower. What i mean is in col 3 i will have the name, number & address etc, in column 2 i will have social stuff and col 1 i will have an image. I would like to have the name and address stack up first, then the image, then the social icons. The order would be 3,1,2. Im trying to keep it responsive.CSS:\[code\]/* SECTIONS */.section {clear: both;padding: 0px;margin: 0px;} /* COLUMN SETUP */.col {display: block;float:left;margin: 1% 0 1% 1.6%;}.col:first-child { margin-left: 0; }/* GRID OF THREE ============================================================================= */.span_3_of_3 {width: 100%; }.span_2_of_3 {width: 66.1%; }.span_1_of_3 {width: 32.2%; } /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ @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%;}}\[/code\]HTML:\[code\]<div class="section group"><div class="col span_1_of_3">This is column 1</div><div class="col span_1_of_3">This is column 2</div><div class="col span_1_of_3">This is column 3</div></div>\[/code\]