Bulma column width limits during breakpoint transitions

Short Answer

Yes: a generic modifier like is-half acts as the fallback at every viewport width. Breakpoint-scoped modifiers such as is-half-desktop are wrapped in min-width media queries, so they only activate from their breakpoint upward and override the generic rule while active. At the exact breakpoint boundary, the min-width query matches, so the breakpoint-specific class wins.

How Bulma Resolves the Cascade

Bulma's column system is mobile-first. The rules stack like this:

• Generic modifiers (is-half, is-one-quarter) are plain rules with no media query. They apply everywhere.
• Breakpoint modifiers (is-half-tablet, is-half-desktop, is-half-widescreen) live inside min-width media queries. Once the viewport reaches that breakpoint, the scoped rule overrides the generic one, and it keeps applying at larger breakpoints unless an even larger scoped modifier exists.
• is-fullwidth-mobile is the exception: it uses a max-width query targeting only the mobile range, so it stops applying once the tablet breakpoint is reached, handing control back to generic or larger-breakpoint rules.

Because all these selectors have equal specificity, when two modifiers for the same breakpoint conflict (e.g., is-half-desktop and is-one-third-desktop on one element), the winner is decided by source order in the compiled stylesheet — not by the order of classes in your HTML.

What This Means for a Combined Class Set

For a column with is-fullwidth-mobile is-half-desktop:

1. Below the tablet breakpoint: is-fullwidth-mobile applies (100% width).
2. From tablet up to (but not including) desktop: neither scoped rule matches, so the column falls back to default flex behavior — it shares space with siblings rather than taking a fixed width, unless you also add a generic or tablet modifier.
3. At and above the desktop breakpoint: is-half-desktop applies (50% width).

That middle range is the common surprise: if you want a defined width on tablet, you must state it explicitly, e.g. is-fullwidth-mobile is-half-tablet is-one-third-desktop.

Verifying on Your Build

Exact breakpoint pixel values and available class names differ between Bulma versions, and custom Sass builds that change $tablet/$desktop or reorder imports change both the boundaries and source-order precedence. To confirm behavior on your install:

• Open DevTools responsive mode, set the viewport exactly to a breakpoint value, and inspect the column — the Styles pane shows which rule wins and which are struck through.
• Search your compiled bulma.css for the modifier to see whether it sits in a min-width or max-width query and where it falls in source order relative to conflicting classes.
• Resize across mobile, tablet, and desktop widths and record the computed flex-basis for the actual class combination you're shipping.

One caveat: because specificity is tied, any later-loaded custom CSS targeting .column can silently override Bulma's modifiers. If the Styles pane shows your width coming from an unexpected file, that's the cause.