Change viewport when changing div width

Question

I have a form designer in my application and for the convenience of users I must provide the user with this opportunity to change the viewport and see how the form will look in real form.

I use bootstrap 3 to form and use the col and row classes to control layouts. There are 4 buttons in the form with a viewport icon, for example Desktop, Tablet, Tablet-Horizontal, Mobile.

when the user clicks on these buttons, I add the desired class to my div container and resize it using the width property. but when I bootstrap does not detect this and does not respond to div changes, because it works with the width of the window (for example, media queries).

here is the css:

.edit__container {
    &.container--lg {
        width: 100%;
    }

    &.container--md {
        width: 80%;
    }

    &.container--sm {
        width: 60%;
    }

    &.container--xs {
        width: 30%;
    }
}

viewport javascript 200 , .

jquery, .

, iframe .

Answer 1

.
:

.edit__container {

    &.container--xs {
        width: 30%;


        @for $i from 1 to 12 {
        .col-md-#{$i} {
                width:100%;
            }
        }

    }
}

col-sm, col-lg ...

Answer 2

! , jQuery

$("Selector").css("cssText", "width: size% !important;");