sidebar widgets on the top (not bottom) for mobile.

HI, I am trying to get the sidebar woocommernce widgets on the top (not bottom) for mobile. I used the code below that I found on an Enfold thread. It works on the mobile perfect, but negatively effects the desktop version by ‘pushing’ all content to the middle. Can you please help?

@media only screen and (max-width: 786px) {
.container {
display: flex!important;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}

/* Sidebar */
#top .container aside {
order: 1;
flex-grow: 1;
}

/* Main Content */
#top .container main {order: 2;flex-grow: 1;}