How to make bootstrap col-sm-* work in mobile devices? - html

Question

I am working on a project which is responsive till col-sm . I need that to render perfect in mobile device.
As whole project is already build up it's almost impossible for me to add col-xs-* for mobile.
Is there any jquery/scss way to make col-sm work as col-xs on mobile.
I need tablet version to open in mobile devices

Answer 1

Since col-sm classes (specifically widths) kick in from 768px, you can OVERRIDE Bootstrap's styling for col-sm's to mimick col-xs behaivour for lower viewports. The first thing to ensure is that you have a parent class in your project that you can use as a parent / child selector as simply writing styles like .col-sm-* {} will conflict with Bootstrap's native styling.
Let's say your body tag has a class of "page" for example, we can use #media queries to mimick what the col-xs classes do below 767px:
#media (max-width: 767px) {
.page .col-sm-3 {
width: 25%;
}
.page .col-sm-6 {
width: 50%;
}
.page .col-sm-9 {
width: 75%;
}
}
You can also use wildcards the same way Bootstrap does too:
#media (max-width: 767px) {
.page div[class^="col-sm-"] {
float: left;
}
}
Also, ensure your custom CSS file is referenced AFTER the Bootstrap one.

Answer 2

You could always do multiple col sizes in your code, too.
`<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>`
Here's the link for more info: http://getbootstrap.com/css/