Responsive - same width for mobile and desktop - mobile flag?

Hi all!

I am using vaadin responsive flags and working on different widths for display slightly different layouts.
I am having the following problem: there are times when, for instance, a layout takes 1/3 of the screen if I am on a desktop, and the entire screen if I am on a mobile (based on width sizes). By doing this I can show 3 boxes one next to the other on the same row on desktop.
This part works ok, but when I want to change labels font size based on width, I encounter that the width of a Label that uses 100% of its container as width, may have the same width in a Desktop (as the container is a box that takes 1/3 of the screen) and in a Cellphone (as the container here takes all the horizontal space, but of course the screen is smaller).

So, on this case, I can not change the font-size of a label based on width. If there a mobile flag that I can use, or any way in which I can work around this situation?

Thank you very much!

PS: I am attaching screen to make the scenario easier to understand.
PS2: Sorry, the text on the screens attached is written on Spanish, but I think it will help anyway.

http://pasteboard.co/erRrp8sQ.jpg
http://pasteboard.co/erTife1h.jpg