anantirobot on "How Do I Rearrange Sidebar Widgets for the Mobile Responsive CSS?"

On the desktop site, my logo/header is on the side with the sidebars (not on top).

I like the look of this, except when I look at it on mobile, the sidebars are all the way at the bottom.

The order is:
MENU
CONTENT
SIDEBARS

How do I get the order to be:
MENU
SIDEBARS
CONTENT
?

Here is the current CSS for the Responsive Layout section:
/* RESPONSIVE SUPPORT
----------------------------------------------- */
@media screen and (max-width: 960px) {
.container {
width: 90%;
}
.site-content {
float: left;
}
.site-sidebar {
width: 35%;
float: right
}
.site-sidebar .widget_search .search-field {
width: 95%;
margin: 0 0 10px;
}
.site-extra .widget-area {
width: 50%;
}
}
@media screen and (max-width: 758px) {
.site-header .widget-area {
display: none;
}
.site-header .site-branding {
float: none;
text-align: center;
}
.content-area {
float: left;
}
.site-content {
margin: 0;
}
.site-sidebar {
width: auto;
float: right
margin: 20px 0 0;
}
.site-extra .widget-area {
width: 100%;
}
}
@media screen and (max-width: 480px) {
.site-footer {
text-align: center;
}
.site-footer .site-info,
.site-footer .site-credit {
float: none;
}
}
@media screen and (max-width: 320px) {
}