>>>>I have another project where the following code works:
>>>>
>>>>

>>>> <div class="container">
>>>>           
>>>>                <div class="row col-md-offset-1 col-lg-offset-2 hidden-xs"> 
>>>>

>>>>
>>>>So, it must be that I am doing something different in this project. I will keep trying/testing.
>>>
>>>sure, .hidden-xs and .container are set on different elements, even if contained.
>>>
>>>you can just do the same, create a
>>>

<div class="hidden-sm-low">

>>>inside the
>>>

<div class="container">

>>
>>I did exactly what you suggest (code below) but still no go:
>>
>>

>> <div class="container">
>>        <div class="hidden-sm-low">
>>            <p>Sample text</p>
>>        </div>
>>   </div>
>>

>
>you may need to wrap it inside a row and a column
>
>we can only see from the CSS pane of browser tools

My problem is that I need to learn how to "read" the CSS pane of the browser tools. For example, when I click on the element (e.g. div class="hidden-sm-low"), how to read the CSS pane. For example, when I reduce the size of the display I see that the following code:

@media (min-width: 576px)
.container {
    max-width: 540px;
}

is responsing (the width number has reduced). But nothing else in the CSS pane is clear to me.