---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/responsive-design'
title: 'Make your layout work on phones | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Choose column layouts per screen size, mirror rows and hide elements on phones or desktops'
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Make your layout work on phones'
      description: 'Choose column layouts per screen size, mirror rows and hide elements on phones or desktops'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/responsive-design'
      articleSection: 'Design guides'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/responsive-design'
      description: 'Choose column layouts per screen size, mirror rows and hide elements on phones or desktops'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Style your elements](/hc/documentation/learn-dxpr-builder/element-settings) /[Design guides](/hc/documentation/learn-dxpr-builder/design/overview) # Make your layout work on phones.

Choose column layouts per screen size, mirror rows and hide elements on phones or desktops

 Learn DXPR BuilderBuild pagesStyle your elementsDesign guides

   ## In this guide

 Related guides

- [Rows and Columns](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [Mobile editing](/hc/documentation/learn-dxpr-builder/editing/mobile-editing)
- [Full-width layouts](/hc/documentation/learn-dxpr-builder/design/full-width-layouts)

Your pages adapt to phones and tablets by themselves: columns sit side by side on wide screens and stack on small ones. This page shows you how to take control. You set a column layout per screen size, mirror the order on wide screens and show elements on some devices only. The example turns a row of four columns into two by two on tablets.

The video hides a photo on phones, then narrows the window to show it disappear.

  ## Before you start

- A row with four equal columns on the page; see [Rows and columns](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns).

## Choose a layout per screen size

1. Hover the row and click the grid icon in its control bar. The layout dialog opens with a **Medium devices (≥ 768px)** panel.
2. Click **Add screen size**. A second panel opens, set to **Extra small (< 576px)**.
3. In that panel's dropdown, choose **Small devices (≥ 576px)**.
4. Click **Custom Layout**, type `1/2 + 1/2 + 1/2 + 1/2` and click **Save**.
5. Click **Save** on the toolbar.

Four halves keep all four columns and put two on each line. The tile with two equal columns would cut the row to two columns on every screen size.

## What you see

On a desktop the four columns still sit in one line. Narrow the browser window below 768 pixels and they wrap two by two. Below 576 pixels they stack, one per line, in the order you see in the editor.

A layout applies from its screen size upwards, until a larger screen size has its own layout. Every new row starts with one layout for **Medium devices (≥ 768px)**, so its columns stack on phones and small tablets. **Remove screen size** in a panel deletes that layout again.

## Mirror the order on wide screens

Open the row's **More** menu, choose **Settings** and switch on **Mirror row**. From 768 pixels up, the columns show in reverse order; on smaller screens they stack in editor order.

Use it for alternating rows of picture and text. Put the picture first in the editor, so phones show it above the text, and mirror every second row so desktops show the picture on the right.

## Show or hide an element per screen size

1. Open the element's **More** menu and choose **Settings**.
2. Under **HTML classes**, pick a chip from the **Responsive Visibility** group, for example **Hidden on extra small devices, phones (<576px)**.
3. Click **Save**.

Each **Hidden on** chip hides the element on one screen size only. Each **Visible on** chip shows it on that one size and hides it everywhere else.

## Screen sizes

| Label in the layout dialog | Screen width |
|---|---|
| **Extra small (< 576px)** | Phones in portrait |
| **Small devices (≥ 576px)** | Large phones, small tablets |
| **Medium devices (≥ 768px)** | Tablets |
| **Large devices (≥ 992px)** | Laptops |
| **Extra large (≥ 1200px)** | Desktops |
| **Extra extra large (≥ 1400px)** | Large desktops |

A **Positioned layers** element has its own **Responsive** toggle, off by default. Switch it on to scale the canvas height and its text with the window width, so the composition keeps its proportions.

## If you don't see the change

- **Columns still stack on a tablet.** The row has no layout for that screen size, so the columns stack below 768 pixels. Open the row's grid icon, click **Add screen size** and choose **Small devices (≥ 576px)**.
- **An element disappeared on every screen size.** It carries two **Visible on** chips, and each hides it where the other shows it. Keep one, or use **Hidden on** chips, one per size to hide.
- **Mirror row does nothing on a phone.** **Mirror row** works from 768 pixels up. To change the order on phones, move the columns in the editor instead.

## What's next?

- [Rows and columns](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): build the rows you make responsive here.
- [Edit a page on your phone or tablet](/hc/documentation/learn-dxpr-builder/editing/mobile-editing): check and fix pages on a small screen.
- [Run a section edge to edge](/hc/documentation/learn-dxpr-builder/design/full-width-layouts): decide how wide your content runs.