Does Twitter Bootstrap 3 provide a built-in way to "simulate" a smaller screen by adding a css class to grid container?
My use case is that I want to display an section of html using bootstrap's grid normally on a large screen, but I want to reuse the same snippet for displaying in a modal (which is much narrower). For example, say I have this html:
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">One</div>
<div class="col-md-6 col-sm-12">Two</div>
</div>
</div>
Is there a built-in class I can add to the .container
element (like .simulate-sm
) to force the columns to display using the sm
grid definition, even if it's on md
screen? The html above is just an example: my real-world html has a large number of rows and more varied column combinations, which makes me hesitant to try to massage the column classes individually.
Thanks for your help!
col-lg-12
in your example?One
andTwo
to appear next to one another on a large screen, but stacked on a small screen (this is easy with the out-of-the-box grid). But I also want to able to add a class to the.container
to makeOne
andTwo
stacked, even when on a large screen. I'll make an edit to my question to make this more clear.