Mobile sidebar not moving to bottom

At this site I have tried several ways to get a good mobile view with the sidebar on the bottom. After writing my own code didn’t seem to work, I tried Jetpack’s Mobile plugin, which is what is there now. Here are several things I tried with the custom css:

@media screen and (min-width: 1164px) {
	.sidebar {
		width: 20%;
		float: left;
	}
}

@media screen and (min-width: 320px) and (max-width: 1163px) {
	.sidebar .left-sidebar {
		width: 100%;
		float: bottom !important;
	}

	.skip-link {
		display: /*don't do anything*/
	!important;
	}
}

.mobile-theme .sidebar {
	float: bottom !important;
}

Then I read that Jetpack will put sidebars with the class name sidebar-1 at the bottom, but my theme is complicated so I found a javascript that would change the name of the class, so I added this to the header area:

<script type="text/javascript">
    document.getElementById("left-sidebar").className =
document.getElementById("left-sidebar").className.replace
      ( /(?:^|\s)sidebar-1(?!\S)/g , '' )
    }
</script>

None of these things have worked. I like the Jetpack Mobile look, but I’d like to see the sidebar at the bottom. How can I accomplish that? Or is there a better plugin?