On my previous reply, what the example css code does is to make sure that even when the screen is
840px or smaller, the content and the sidebar are kept side by side. Then when the screen is
480px or smaller, both the content and the sidebar widths are 100% so the sidebar goes under the content.
but it breaks mobile
That’s really vague. It would be hard for me to guess what breaks mean without seeing your site (since you don’t give a url).
I doubt the code on your reply above is being applied to the sidebar. There is no ID on the theme named
#sidebar, unless it was edited. There is a class for both sidebars which is
.sidebar and an ID for targeting individually