How to hide the sidebar in the mobile version by default?

Question

css

I am making a portfolio website petrovich-design.ru/portfolio/. I'm using the Brushed template. On the page on the left there is a sidebar block, I want it not to be shown in the mobile and print versions of the site. It seems like responsive.css is responsible for displaying in the mobile version, i.e. I prescribe there (conditionally, p. 210) for media (min-width: 480px) the following condition - #sidebar .hide-on-mobile {display: none !important;}
And I prescribe the block
But the miracle does not happen ... what am I doing wrong ? Help me figure it out... 

Answer 1

Do you work with pure css?
Judging by the layout, you need to hide not the sidebar, but the parent, which is "class="span3".
Pay attention to the line of code:

<div class="span3" .hide-on-mobile="" display:="" none;="">

there's clearly some kind of bug here.
Why do you write #sidebar .hide-on-mobile if there is such a class in #sidebar descendants? Just #sidebar {display: none !important;}