Gostaria de criar um css que quando uma certa classe estivesse em no tamanho xs teria um font-color red e os demais tamanhos esta cor mudaria para green. Porém sem ter que repetir o texto. tipo:
<div class="hidden-xs">
<div class="Vermelho">
Teste
</div>
</div>
<div class="col-xs-12 hidden-sm hidden-md hidden-lg hidden-xl">
<div class="verde">
Teste
</div>
</div>
Queria uma classe teria duas alternativa de cor dependendo do tamanho...
<div class="col-xs-12">
<div class="Cor">
Teste
</div>
</div>
Será que é possivel tal façanha? POde ser em CSS ou JS. Agradeço desde de já pela ajuda