Change Bootstrap Button Group's Class when Browser Window's Changes

Question

I have my button group with an id : opacnavigation-btn

    <div id="opacnavigation-btn" class="btn-group">              
        <button type="button" class="btn btn-success ">
            <i class="icon-home"></i>
            Home                    
        </button>
        <button type="button" class="btn btn-success ">
            <i class="icon-thumbs-up"></i>                    
            Policies
        </button>
        <button type="button" class="btn btn-success ">  
            Ask a Librarian
        </button>
        <button type="button" class="btn btn-success ">
            <i class="icon-comment"></i>   
            About the Library
        </button>                              
    </div> 

It looks like this when the browser window is 521px and above :

But when the browser window is below 521px, I want to change the Button Group's class from btn-group to btn-group-vertical. It should look like this:

I've done it using this code in CSS:

@media only screen and (min-width: 0px) and (max-width: 521px){
    ....//Whats Next?
}

My problem is I dont know how to change the button group's class. How will I do it? please help me. Thanks.

Answer 1

You have to give same css style from btn-group-vertical class to btn-group class into your media query.

@media only screen and (min-width: 0px) and (max-width: 521px){ 
    .btn-group > .btn, .btn-group > .btn-group, .btn-group > .btn-group > .btn {
        display: block;
        float: none;
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-top: -1px;
    }
    .btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
        margin-left: 0px;
    }
    .btn-group > .btn:first-child:not(:last-child) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-right-radius: 4px;
    }
    .btn-group > .btn:first-child {
        margin-left: 0;
    }
}