bootstrap - using visible-phone to change CSS not working

bootstrap - using visible-phone to change CSS not working

CSS nob looking at bootstrap...
I assumed classes like .visible-phone, .visible-desktop, etc... were
applied to the body tag. Looking in firebug that doesn't appear to be the
case.
What I'm trying to do is change CSS settings based on .visible-xxxx, for
example:
.ugly-color { color: red; }
.visible-desktop .ugly-color { color: green; }
<div class="visible-desktop">I see this text</div>
<div class="ugly-color">Why is this red and not green</div>
Does anyone know where the .visible-desktop is applied? as if it was the
body tag, then ugly-color would be inside .visible-desktop
All input appreciated. Thanks!