Ahh I can see it now.
I don't know what's going on, but a lot of things are going on, on your site xD
I'm thinking somewhere around your code or your plugins, you're cloning and rewriting DOM parts. I can't tell which parts, but the rewriting probably starts around the element "qa-main-wrapper". Probably your <link> tags as well, that's where I think the problem is coming from. So the CSS styling computation when rendering gets "confused".
You have a "float: none!important;" property set to "qa-main" , which should resolve the problem, but somehow the site isn't even reading the !important statement as it should be. It's acting like a normal "float: none;" without the !important part, and it's acting like this rule wasn't even defined there. It's not reading it at all.
But if you inspect element and toggle the "float: none!important;" on and off. You'll see that the sidebar goes to where it's supposed be, as now is reading the property as it should be.
https://i.imgur.com/kICiYUe.jpg
This issue doesn't happen on normal Muffin as you can see in demo site. The "!important" statement it's not even necessary there, because this rule, comes at the very bottom of the CSS stylesheet, to apply this only for smaller screens.
--------------
How to solve it?
Open Muffin theme, go to: CSS > custom-styles.css
and paste the following code:
@media (max-width: 1050px) {
.qa-sidepanel {
display: table-footer-group;
}
}
Save it, and Re-upload file.
Cheers