Trocar classe de div em versão mobile

Tenho uma div e gostaria de alterar a classe dela em versão mobile:

<div id="cardDiv" class="col-sm-2 mb-4 mr-3 ml-3">
</div>

Em versão mobile preciso que a classe seja: class="col mb-4"
Como é possivel fazer esta alteração?

Bom dia segue exemplo de uso definindo o css na propria pagina mais, mais pode usar numa pagina css global tambem

 <style>

	.col mb-4 { /*propriedades padrao da classe quando abrir pagina em telas maiores que 960px, que no caso pega telas desktop de pc e notebook*/  
	font-size: 15px;	
	color: #8B5A00; 
	}
	
	@media (max-width: 960px) { /*propriedades da classe quando abrir pagina em telas de 0 até no maximo 960px, para pegar 
			                      telas de celulares esse tamanho vc pode definir a seu gosto */
		.col mb-4{	 	     
		font-size: 10px;	
		color: #FFFF00; 		 
		}
		
	}
		 
 </style>	
<div id="cardDiv" class="col mb-4">
</div>