Add responsive column direction controls (vertical stack on desktop, horizontal on mobile) in Section block

Impact: 45 · Confidence: 90 · Complexity: 40

Description

Problem: Users cannot easily configure inverted responsive layout directions (e.g. vertical/stacked layout on desktop and horizontal side-by-side layout on mobile screens) using standard Section block settings without custom CSS. Desired behavior: Provide intuitive per-device layout direction settings in the Section block sidebar/toolbar so users can define horizontal or vertical column orientation for Desktop, Tablet, and Mobile independently. Acceptance criteria: - Users can explicitly set column direction (horizontal vs. vertical stack) independently for Desktop, Tablet, and Mobile previews in the Section block settings. - The generated block CSS applies the correct flex-direction and width rules at each responsive breakpoint. - Layout changes render accurately both in the editor preview and on the front end.

Customer Context

Based on 1 uninstall feedback entry. The user deactivated Otter Blocks after 19 hours because they were unable to achieve a custom layout with vertical stacked columns on desktop (PC) and horizontal side-by-side columns on mobile (SP).

Root Cause Analysis

The customer needs a responsive layout direction override where columns stack vertically on desktop screens and display side-by-side horizontally on mobile screens. While Otter's Section block offers basic per-device column layout presets, traditional web layouts assume horizontal-on-desktop and vertical-on-mobile. When users require the reverse arrangement, the absence of explicit flex-direction controls per responsive breakpoint forces them to write custom CSS media queries or abandon the plugin.

Reasoning

The uninstall feedback submission indicates a gap in responsive layout controls for the Section block in Otter Blocks. The user wanted a layout that stacks vertically on desktop (PC) but displays horizontally side-by-side on mobile devices (SP). Currently, standard column layouts default to side-by-side on desktop and stacked on mobile, and configuring an inverted layout per breakpoint is either unsupported or unintuitive. No existing GitHub issue directly covers this capability.

Source: automated uninstall feedback — otter-blocks, 2026-08-26
Generated by feature-request-triage workflow (ID: feature-request-triage_6a8fc487bdd898.28163158)

Start by locating the Section block's existing responsive column layout settings in the sidebar or toolbar and trace how they generate CSS for the editor preview and front end. Add independent horizontal or vertical direction controls for Desktop, Tablet, and Mobile, then verify flex-direction and width behavior at each responsive breakpoint.