CSS Arranging order of elements when screen width changes it's properties

I have my page setup in rows with differing column widths. For example:

<div class="row">
  <div class="span6">Left side</div><!-- 50% width -->
  <div class="span6">Right side</div><!-- 50% width -->
</div>

I have properties in place so that on a narrow screen width, each column will be 100% width. This, of course, makes the "right side" appear below the "left side" due to the order it appears on the page.

I'm trying to find out if there is ANY WAY to add a class or something to the "right side" div so that if the screen width makes each column 100% width, the right side will appear ABOVE the left side, and not below.

Preferably I'd like to do this with only CSS, but if I have to use jQuery I can do that as well.

.row { 
width:100%; 
margin:0 auto; 
}

.span1 { width:8.33%; }

.span2 { width:16.66%; }

.span3 { width:25%; }

.span4 { width:33.33%; }

.span5 { width:41.66%; }

.span6 { width:50%; }

.span7 { width:58.33%; }

.span8 { width:66.66%; }

.span9 { width:75%; }

.span10 { width:83.33%; }

.span11 { width:91.66%; }

.span12 { width:100%; }

.span1-5 { width:20%; } /* This column can be used as a one fifth of the row */

.span1-8 { width:12.5%; } /* This column can be used as a one eigth of the row */ 

.span1, 
.span2, 
.span3, 
.span4, 
.span5, 
.span6, 
.span7,
.span8, 
.span9, 
.span10, 
.span11, 
.span12, 
.span1-5, 
.span1-8 {
  min-height: 1px; 
  float: left; 
  padding-left: 10px; 
  padding-right: 10px; 
  position: relative; 
}

@media only screen and (max-width: 960px) {
.row .row .span1, 
.row .row .span2, 
.row .row .span3, 
.row .row .span4, 
.row .row .span5, 
.row .row .span6, 
.row .row .span7,
.row .row .span8, 
.row .row .span9, 
.row .row .span10, 
.row .row .span11, 
.row .row .span12, 
.row .row .span1-5, 
.row .row .span1-8 {
    width: 100% !important;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px; 
}