When my website is in mobile view, the sidebar of my blog is at the top of all my posts. I want to move it to just above my footer area, so it's at the end of my posts. Ive tried various things from searching online, but am having no luck.

My current code that I added to my "template-based site" is :

Code:
.collection-type-blog #sidebarWrapper {display: inline!important; position: static!important; bottom: 0px!important; z-index:1;}
.collection-type-blog #sidebar {border-left:0px; border-right:0px; margin-bottom: 20px; margin-top: -20px; }