[theme twentytwelve] mobiele versie aanpassen (sidebar)

Ik heb een probleempje met de mobiele versie van mijn website. Ik heb daarvoor een child theme van twentytwelve.

Dit is de link naar mijn website: polderman-photography.com

Ik heb een sidebar waarin mijn menu staat, maar toen ik op mijn mobiel keek zag ik dat mijn content door mijn sidebar heen liep. Verder kwam de content wel netjes onder elkaar. (behalve op de homepage maar dat klopt want dat is nu nog 1 plaatje)

Goed, toen ben ik op zoek gegaan waar in de code ik dit kon veranderen. Ik kwam uit op een code om de hele sidebar weg te halen, deze heb ik een beetje aangepast zodat hij niet werd weggehaald, maar ook niet door mijn content loopt. Dat is nu deze code:

@media screen and (max-width: 700px) {
.widget-area {
}

.site-content {
width: 98%;
}

Werkt opzich prima maar mijn sidebar komt nu onder mijn content te staan, iets wat ik liever niet heb, omdat niet iedereen zo slim is om naar beneden te scrollen om te kijken of daar het menu misschien staat. Dus hoe kan ik mijn sidebar boven mijn content krijgen?

En hoe krijg ik die sidebar ook centered in het midden net als mijn content en logo?

Als het niet mogelijk is de sidebar ergens anders te plaatsen, hoe kan ik dan een knop toevoegen waar ik op kan klikken zodat je gelijk naar het menu scrollt en welke dan natuurlijk niet zichtbaar is in de desktop versie.

Ik heb ook uitgevonden hoe ik de hele mobiele versie kan verwijderen, maar dat is natuurlijk eigenlijk niet wat ik wil.

Alvast bedankt!