Ajouter / Supprimer des classes à l'aide de requêtes multimédias

Ma question est comment peut-on conditionnellement ajouter ou supprimer des classes ou id d'une catégorie donnée à l'aide de css media queries seul? Dans l'exemple de code ci-dessous, par exemple, comment pourrais-je ajouter "Class_B" à l'ensemble de la div avec "Class_A" quand @media all and (max-width: 1000px) and (min-width: 700px)?

<div class="Class_A"><div>

Mon cas: je suis en utilisant Twitter Bootstrap v3.2.0. J'ai un en-tête avec une série de boutons en elle de la sorte:

<button class="btn navbar-btn">FooA</button>
<button class="btn navbar-btn">FooB</button>
<button class="btn navbar-btn">FooC</button>

Lorsque l'écran saute de la moyenne (dm) pour les petits(sm), je voudrais ajouter la class "btn-sm" pour l'ensemble de ces éléments. Comment puis-je le faire plus efficacement/élégamment? (Je préfère ne pas utiliser de JS ou d'ajouter des bibliothèques supplémentaires si c'est possible)

Je me rends compte que je pouvais ajouter un arbitraire de la classe à tous ces boutons comme "btn-sm-dupliquer" et se contenter de définir quand le navigateur atteint une certaine spécification comme le code ci-dessous. Cependant, il semble laid pour créer un doublon de classe quand il est vraiment pas du nec... Pouvez-vous suggérer quelque chose?

@media all and (max-width: 1000px) and (min-width: 700px) {
       btn-sm-duplicate{

::Copy/Paste all the attributes of btn-sm from bootstrap::

       }
}  

source d'informationauteur Afflatus | 2014-07-16