Adicione a classe ui_toggleclass no elemento que alternará entre classes de acordo com a largura da tela.
No mesmo elemento, coloque o atributo data-wbreakups com os seus breakpoints, que são os conjuntos de classes para cada largura de tela (em pixels).
Os breakpoints são separados por ponto-e-virgula (;). Já a separação entre largura e classe em cada breakpoints é feita por dois pontos (:), ex: data-wbreakups="768:red;1200:blue".
Existem valores notáveis para representar a largura, são eles: sm=576, md=768, lg=992 e xl=1200.
O elemento ficará sem classe quando a largura de tela for menor do que a largura definida para a primeira classe do breakpoint.
Se for necessário delegar uma classe para ser aplicada abaixo do primeiro breakpoint, use data-class-default e insira a classe desejada.
Uma aplicação bastante comum é a alternância entre duas classes somente, exemplo: data-wbreakups="576:orange" data-class-default="pink"
