Overwrite multi-class css with one css class

I am using two separate CSS files with media queries to achieve different styles based on the viewer's screen size. I have the following lines in my desktop css file:

CSS Desktop:

.labelContainer .labelText.labelText_xl {
  width: 155px;
}

.labelContainer .labelText.labelText_big {
  width: 135px;
}

.labelContainer .labelText.labelText_med {
  width: 105px;
}

      

        
        
        
      

    

What I am trying to achieve is that when the Mobile css version runs, regardless of the labelText_size class, the labelText should take up the full width. If I copy the above three rules and change the width to 100% in each one, it works as expected. But if I try to do the following

.labelContainer .labelText {
  width: 100%;
  height: 32px;
}  

      

        
        
        
      

    

only the height changes, but the width remains the same.

I'm guessing this is because the more precise the rule, the higher its priority, but there is no way to tell CSS that no matter what other classes the DOM element has, apply the desired rule?

Because if I define as 20 different sizing styles for my labels, I now have to define the same 20 different sizing styles in my mobile css, instead of using one rule that overwrites the rest.

EDIT: I know I can achieve the desired result by marking the rule as important, but I would rather not do this because I don't think setting something important is good practice in css.