.hidden-phone reads like an instruction not to send something to a phone. It is three lines of CSS in a media query. The markup is still parsed, the images inside it are still requested, and any script that runs against it still runs — the element is simply not painted.
/* bootstrap-responsive.css, in essence */
@media (max-width: 767px) {
.hidden-phone { display: none !important; }
.visible-phone { display: inherit !important; }
}
/* so this still costs the phone every byte of the carousel */
/* <div class="carousel slide hidden-phone"> ... </div> */For a table column, a secondary navigation block or a decorative panel that is already in the DOM, that is exactly the right tool and costs nothing. For anything heavy it is the wrong one, and the gap between what the class name promises and what it does is where the mobile page weight goes: a gallery marked hidden-phone downloads in full. Deciding server-side, or inserting the markup from script after a width check, is the only thing that actually saves the bytes. Two smaller traps. display: inherit on the .visible-* classes restores the parent’s display value, which for a span, a list item or a table cell is not what the element had — so a .visible-phone table row comes back as something that is not a row. And the breakpoints are fixed at 767, 979 and 1200 pixels, in a stylesheet that is a separate file: if bootstrap-responsive.css is not included, every one of these classes is inert and nothing warns you.