Flavor Block Visibility

Flavor Block Visibility adds two responsive tools to the block editor — without page builders, extra blocks or a build step.

Responsive visibility

Every block gets three toggles in its Advanced panel: Hide on Desktop, Hide on Tablet and Hide on Mobile. Hiding is done with CSS media queries — no JavaScript.

Responsive column order

The core Columns block gets a Responsive Column Order panel. Give each device its own order — for example, show the image above the text on mobile and next to it on desktop. Reorder by drag and drop or with the arrow buttons, or use Reverse and Reset.

The order is applied with CSS, so it is correct from the first paint. An optional tiny script also reorders the HTML, so keyboard navigation and screen readers follow what visitors see.

Features

• Works with every core and third-party block
• Controls live in the native block settings — no extra sidebars
• Editor preview: blocks hidden on the current device are dimmed, and columns show the order of the current device preview
• Hovering a column in the order list highlights it on the canvas
• Column order follows columns when they are added, removed or moved
• Customizable breakpoints in Settings → Block Visibility
• CSS and scripts load only on pages that need them
• No build step, no external requests
• Clean uninstall — removes all plugin data

Default Breakpoints

• Mobile: 0 – 767px
• Tablet: 768px – 1024px
• Desktop: 1025px and above

Breakpoints can be customized in Settings → Block Visibility.