# `PhiaUi.Components.Layout.ResponsiveStack`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/responsive_stack.ex#L1)

A responsive flex stack that switches from vertical (column) on mobile to
horizontal (row) at a configurable breakpoint.

This encodes the extremely common mobile-column / desktop-row pattern as a
single component with typed attributes, eliminating repetitive
`flex flex-col md:flex-row` class strings.

## Examples

    <%!-- Default: column on mobile, row from md --%>
    <.responsive_stack>
      <div>Left</div>
      <div>Right</div>
    </.responsive_stack>

    <%!-- Row from lg with larger gap --%>
    <.responsive_stack breakpoint={:lg} gap={8}>
      <.card>A</.card>
      <.card>B</.card>
      <.card>C</.card>
    </.responsive_stack>

    <%!-- Reversed row on desktop, centered --%>
    <.responsive_stack reverse align={:center}>
      <div>Media</div>
      <div>Content</div>
    </.responsive_stack>

# `responsive_stack`

Renders a responsive flex stack (column on mobile, row at breakpoint).
## Attributes

* `breakpoint` (`:atom`) - Breakpoint at which the stack switches from column to row. Defaults to `:md`. Must be one of `:sm`, `:md`, `:lg`, or `:xl`.
* `gap` (`:integer`) - Gap between children (0-12) applied as `gap-N`. Defaults to `4`.
* `reverse` (`:boolean`) - When true, uses `flex-row-reverse` instead of `flex-row` at the breakpoint. Defaults to `false`.
* `align` (`:atom`) - align-items value applied to the flex container. Defaults to `nil`. Must be one of `nil`, `:start`, `:center`, `:end`, `:stretch`, or `:baseline`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Stack children.

---

*Consult [api-reference.md](api-reference.md) for complete listing*