---
url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/design/responsive-design'
title: 'Laat je lay-out werken op telefoons | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T02:30:24+00:00'
updated: '2026-10-24T06:23:11+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Je pagina's passen zich vanzelf aan telefoons en tablets aan: kolommen staan naast elkaar op brede
  schermen en stapelen op kleine. Deze pagina toont hoe je de controle neemt. Je stelt een kolomlay-out
  per schermgrootte in, spiegelt de volgorde op brede schermen en toont elementen alleen op sommige
  apparaten. Het voorbeeld maakt van een rij van vier kolommen twee bij twee op tablets.
  De video verbergt een foto op telefoons en versmalt daarna het venster om hem te laten
  verdwijnen.
tags:
  - Ontwerpgidsen
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T06:23:11+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Laat je lay-out werken op telefoons'
      description: |-
        Je pagina's passen zich vanzelf aan telefoons en tablets aan: kolommen staan naast elkaar op brede
        schermen en stapelen op kleine. Deze pagina toont hoe je de controle neemt. Je stelt een kolomlay-out
        per schermgrootte in, spiegelt de volgorde op brede schermen en toont elementen alleen op sommige
        apparaten. Het voorbeeld maakt van een rij van vier kolommen twee bij twee op tablets.
        De video verbergt een foto op telefoons en versmalt daarna het venster om hem te laten
        verdwijnen.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T02:30:24+0000'
      dateModified: '2026-10-24T06:23:11+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/nl/hc/documentation/learn-dxpr-builder/design/responsive-design'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/design/responsive-design'
      description: |-
        Je pagina's passen zich vanzelf aan telefoons en tablets aan: kolommen staan naast elkaar op brede
        schermen en stapelen op kleine. Deze pagina toont hoe je de controle neemt. Je stelt een kolomlay-out
        per schermgrootte in, spiegelt de volgorde op brede schermen en toont elementen alleen op sommige
        apparaten. Het voorbeeld maakt van een rij van vier kolommen twee bij twee op tablets.
        De video verbergt een foto op telefoons en versmalt daarna het venster om hem te laten
        verdwijnen.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Laat je lay-out werken op telefoons.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [Een rij toevoegen](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [Een pagina bewerken op je telefoon of tablet](/nl/hc/documentation/learn-dxpr-builder/editing/mobile-editing)
- [Laat een sectie doorlopen van rand tot rand](/nl/hc/documentation/learn-dxpr-builder/design/full-width-layouts)

Je pagina's passen zich vanzelf aan telefoons en tablets aan: kolommen staan naast elkaar op brede schermen en stapelen op kleine. Deze pagina toont hoe je de controle neemt. Je stelt een kolomlay-out per schermgrootte in, spiegelt de volgorde op brede schermen en toont elementen alleen op sommige apparaten. Het voorbeeld maakt van een rij van vier kolommen twee bij twee op tablets.

De video verbergt een foto op telefoons en versmalt daarna het venster om hem te laten verdwijnen.

  ## Voordat je begint

- Een rij met vier gelijke kolommen op de pagina; zie [Rijen en kolommen](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns).

## Kies een lay-out per schermgrootte

1. Wijs de rij aan en klik op het gridpictogram in zijn besturingsbalk. Het lay-outdialoogvenster opent met een paneel **Medium devices (≥ 768px)**.
2. Klik op **Add screen size**. Een tweede paneel opent, ingesteld op **Extra small (< 576px)**.
3. Kies in de dropdown van dat paneel **Small devices (≥ 576px)**.
4. Klik op **Custom Layout**, typ `1/2 + 1/2 + 1/2 + 1/2` en klik op **Save**.
5. Klik op **Save** op de werkbalk.

Vier helften houden alle vier kolommen en zetten twee op elke regel. De tegel met twee gelijke kolommen zou de rij op elke schermgrootte tot twee kolommen terugbrengen.

## Wat je ziet

Op een desktop staan de vier kolommen nog steeds in één regel. Versmal het browservenster onder 768 pixels en ze wrappen twee bij twee. Onder 576 pixels stapelen ze, één per regel, in de volgorde die je in de editor ziet.

Een lay-out geldt vanaf zijn schermgrootte omhoog, totdat een grotere schermgrootte zijn eigen lay-out heeft. Elke nieuwe rij begint met één lay-out voor **Medium devices (≥ 768px)**, dus zijn kolommen stapelen op telefoons en kleine tablets. **Remove screen size** in een paneel verwijdert die lay-out weer.

## Spiegel de volgorde op brede schermen

Open het **More**-menu van de rij, kies **Settings** en schakel **Mirror row** in. Vanaf 768 pixels tonen de kolommen in omgekeerde volgorde; op kleinere schermen stapelen ze in editorvolgorde.

Gebruik het voor afwisselende rijen met foto en tekst. Zet de foto eerst in de editor, zodat telefoons hem boven de tekst tonen, en spiegel elke tweede rij zodat desktops de foto rechts tonen.

## Toon of verberg een element per schermgrootte

1. Open het **More**-menu van het element en kies **Settings**.
2. Kies onder **HTML classes** een chip uit de groep **Responsive Visibility**, bijvoorbeeld **Hidden on extra small devices, phones (<576px)**.
3. Klik op **Save**.

Elke **Hidden on**-chip verbergt het element op slechts één schermgrootte. Elke **Visible on**-chip toont het op die ene grootte en verbergt het overal elders.

## Schermgroottes

| Label in het lay-outdialoogvenster | Schermbreedte |
|---|---|
| **Extra small (< 576px)** | Telefoons in portret |
| **Small devices (≥ 576px)** | Grote telefoons, kleine tablets |
| **Medium devices (≥ 768px)** | Tablets |
| **Large devices (≥ 992px)** | Laptops |
| **Extra large (≥ 1200px)** | Desktops |
| **Extra extra large (≥ 1400px)** | Grote desktops |

Een **Positioned layers**-element heeft zijn eigen **Responsive**-schakelaar, standaard uit. Schakel hem in om de canvashoogte en zijn tekst met de vensterbreedte mee te schalen, zodat de compositie zijn verhoudingen behoudt.

## Als je de wijziging niet ziet

- **Kolommen stapelen nog steeds op een tablet.** De rij heeft geen lay-out voor die schermgrootte, dus de kolommen stapelen onder 768 pixels. Open het gridpictogram van de rij, klik op **Add screen size** en kies **Small devices (≥ 576px)**.
- **Een element verdween op elke schermgrootte.** Hij draagt twee **Visible on**-chips, en elk verbergt hem waar de ander hem toont. Houd er één, of gebruik **Hidden on**-chips, één per te verbergen grootte.
- **Mirror row doet niets op een telefoon.** **Mirror row** werkt vanaf 768 pixels omhoog. Om de volgorde op telefoons te wijzigen, verplaats je de kolommen in de editor.

## Wat nu?

- [Rijen en kolommen](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): bouw de rijen die je hier responsive maakt.
- [Een pagina bewerken op je telefoon of tablet](/nl/hc/documentation/learn-dxpr-builder/editing/mobile-editing): controleer en repareer pagina's op een klein scherm.
- [Een sectie van rand tot rand laten lopen](/nl/hc/documentation/learn-dxpr-builder/design/full-width-layouts): beslis hoe breed je inhoud loopt.