Apply CSS class based on media query [closed]

Question

I'm using Bootstrap 3. What's the best approach to apply different CSS classes based on media queries? I need to apply Bootstrap col-xs classes when it's a mobile device but only apply a custom CSS class when it's the desktop version (md, lg). Right now I have 2 divs and one gets visible based on media queries but I don't want to have the DIV repeated because of that.

I know I can apply col-md and col-lg to a DIV and I'm doing it in many places but this case is different. In mobile devices I want to apply col-xs-2 but in the desktop version I need to make it behave like a table so I use display:table.

Answer 1

Use the col-xs-2 on the div, and add a custom media query to take when screen fits the col-lg-* size.

For example you have this setup:

<div class="container-fluid">
   <div class="row">
       <div class="col-xs-2 custom-lg-col">
           .....
       </div>
       .....
   </div>
</div>

then you can add this to your styles file:

@media (min-width: 1200px) {
  .custom-lg-col {
    width:...;
    display:table;
    ......
  }
}

But you can also leave the col-lg-2 and just add a custon class like this

<div class="container-fluid">
   <div class="row">
       <div class="col-xs-2 col-lg-2 only-desk-class">
           .....
       </div>
       .....
   </div>
</div>

Style:

@media (min-width: 1200px) {
  .only-desk-class {
    width:...;
    display:table;
    ......
  }
}

If you don't want to change the col-lg-* default style, just apply your custom div to the content inside..