>>>I am struggling with what should be a simple task: hiding a div section on displays smaller than md.
>>>
>>>Here is just one of a sample codes I tried
>>>

>>><div class="container col-lg-12 hidden-lg-down"</div>
>>>

>>>
>>>What am I missing? I should I have a certain meta in the header section of the page? I have the following:
>>>

>>> <meta name="viewport" content="width=device-width, initial-scale=1">
>>>

>>>
>>>TIA
>>
>>Don't know which version of bootstrap.css you are using. I think the current default version with VS is 3.3.7 which doesn't have the 'hidden-lg-down' (or, indeed, any '-up'/'-down' suffixes) - check the source in bootstrap.css.
>>
>>If you are on 4.0 then for displays smaller than md it's hidden-sm-down.
>>
>>There's a chart here: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
>
>I am using the latest version of Bootstrap, 4. And I have looked at the page with the chart many times but I cannot get it to work for me. Unfortunately they don't have an example of how this ".hidden-sm-down" or other classes should be used. As you can see from the example above in my message, I have tried "hidden-lg-down" which according to the chart should make the Div not visible on any device but large. But the Div is never hidden in my case. I am sure it is something I am misunderstanding.


maybe .col-lg-12 rule overrides .hidden-lg-down rule

can you post a browser dev tool screenshot with the CSS visible?