Need to change class in CSS for a DIV based on different screen sizes

Question

Need to change class in CSS for a DIV based on different screen sizes

<div id="tab" class="tab_small"></div>

I need to change class of DIV having ID "tab" to "tab_small","tab_medium" & "tab_large" based on the screen size using css only

@media(max-width:450px){tab_small class will apply} 
@media(min-width:450px) and (max-width:768px){tab_medium will apply}
@media(min-width:768px) and (max-width:990px){tab_large will apply}

Is that doable?

with JS I can do, Is there a way to do with CSS in bootstrap?

If all three classes will be there in HTML on that DIV, is there a way to display one out of them in html based on screen sizes?

Thanks in advance!

Answer 1

I think you are trying to achieve a behavior like this. Try to resize the fiddle window. Please be aware that setting a property within #tab selector will override the @media queries, if you want to prevent this behavior just use #tab .tab_small, #tab .tab_medium, #tab .tab_large selectors inside the @media queries.

#tab{
    width: 200px;
    height: 200px;
}
@media(max-width:450px){
    .tab_small{
       background:red;
    }
} 
@media(min-width:450px) and (max-width:768px){
    .tab_medium{
       background: green;
    }
}
@media(min-width:768px) and (max-width:990px){
    .tab_large{
       background: blue;
    }
}

Fiddle Demo