How can I display a different layout with bootstrap 3? - css

Question

I am trying to display a different layout for my mobile views. In the desktop view using the grid system I have 4 columns each with 2 columns an image and a label+value. In mobile I want to skip the image column and for the label and value I want them next to eachother so something like:
This is a label : this is a span.
1 column in the desktop version looks something like this:
<div class="col-md-3">
<div class="col-md-2">
<p>col-md-4</p>
</div>
<div class="col-md-10">
<div>This is a label</div>
<span>This is a span</span>
</div>
</div>
I tried to use col-sm-3 but it still displays in the desktop? How can I get the mobile view with the label and value next to eachother?
See also:codepen

Answer 1

you can use bootstrap css class :
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>

Answer 2

Using a media queries you can change the attributes of elements/classes/IDs based on screen size. You may be particularly interested in using display: none; as follows:
CSS
/*For smartphone and small devices*/
#media only screen and (min-width: 480px) {
.hide-me {
display: none;
}
}
/*For tablet sized devices and larger*/
#media only screen and (min-width: 748px) {
.hide-me {
display: block;
}
}
Of course you can double up the functionality of col-xs-3 (or any of your choosing) but using that as your class selector in the media query.
#media only screen and (min-width: 748px) {
.col-xs-3 {
display: block;
}
}
Check out some standard documentation responsive design - especially those provided by Twitter! Mobile first is common, where you start with the smaller media queries then get bigger.
http://getbootstrap.com/css/