Raduken Raduken - 1 year ago 38
Javascript Question

How to remove a css class and add another when I get a certain mobile resolution

I am using boostrap grid and is working perfect I just got a issue with col-xs-6 when I get the resolution 375px,


by standart come with 50% and I know I can just create a media querie and change it for 100% and will fix my problem.

I just don't want do that kinda hack :), it's any way to remove the class col-xs-6 and add col-xs-12 when get 375px?

I know can just change it for col-xs-12 of course but that will change my div when I get 667px because xs is for extra small resolutions.

In jquery or even better in boostrap?

my classes now:

<div class="col-md-4 col-sm-5 col-xs-6 no-padding sidebar-container"> </div>

how should be after:

<div class="col-md-4 col-sm-5 col-xs-12 no-padding sidebar-container"> </div>

Answer Source

First of all using media queries is not a hack its a way to change the website layout according to different screens.

But may be because of some reason if you don't want to use it or want to change the class only then you can do it by simple jquery resize function.

var winWidth = $(window).width();
function sidebarWidth(){
  } else {



Above code will run on window load and will detect the screen and add the needfull class. But i am also using the same function in resize function because this will work if you resize the window after load.