---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/design/design-responsive'
title: 'Adapter votre mise en page aux téléphones | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:00:28+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Vos pages s’adaptent seules aux téléphones et tablettes : les colonnes s’affichent côte à côte sur écrans larges et s’empilent sur petits. Cette page montre comment prendre le contrôle. Vous définissez une mise en page de colonnes par taille d’écran, inversez l’ordre sur écrans larges et montrez des éléments seulement sur certains appareils. L’exemple transforme une ligne de quatre colonnes en deux par deux sur tablettes.
  La vidéo masque une photo sur téléphones, puis rétrécit la fenêtre pour la voir disparaître.
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-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adapter votre mise en page aux téléphones'
      description: |-
        Vos pages s’adaptent seules aux téléphones et tablettes : les colonnes s’affichent côte à côte sur écrans larges et s’empilent sur petits. Cette page montre comment prendre le contrôle. Vous définissez une mise en page de colonnes par taille d’écran, inversez l’ordre sur écrans larges et montrez des éléments seulement sur certains appareils. L’exemple transforme une ligne de quatre colonnes en deux par deux sur tablettes.
        La vidéo masque une photo sur téléphones, puis rétrécit la fenêtre pour la voir disparaître.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:00:28+0000'
      dateModified: '2026-10-24T17:19:22+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/fr/hc/documentation/apprendre-dxpr-builder/design/design-responsive'
      articleSection: 'Guides de design'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/design/design-responsive'
      description: |-
        Vos pages s’adaptent seules aux téléphones et tablettes : les colonnes s’affichent côte à côte sur écrans larges et s’empilent sur petits. Cette page montre comment prendre le contrôle. Vous définissez une mise en page de colonnes par taille d’écran, inversez l’ordre sur écrans larges et montrez des éléments seulement sur certains appareils. L’exemple transforme une ligne de quatre colonnes en deux par deux sur tablettes.
        La vidéo masque une photo sur téléphones, puis rétrécit la fenêtre pour la voir disparaître.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Accueil
            item: 'https://dxpr.com/fr'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: fr
---
[Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Styler vos éléments](/fr/hc/documentation/learn-dxpr-builder/element-settings) /[Guides de design](/fr/hc/documentation/learn-dxpr-builder/design/overview) # Adapter votre mise en page aux téléphones.

 Apprendre DXPR BuilderCréer des pagesStyler vos élémentsGuides de design

   ## Dans ce guide

 Guides associés

- [Ajouter une ligne](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/lignes-et-colonnes)
- [Modifier une page sur votre téléphone ou tablette](/fr/hc/documentation/apprendre-dxpr-builder/modification/modification-sur-mobile)
- [Faire aller une section de bord à bord](/fr/hc/documentation/apprendre-dxpr-builder/design/mises-en-page-pleine-largeur)

Vos pages s’adaptent seules aux téléphones et tablettes : les colonnes s’affichent côte à côte sur écrans larges et s’empilent sur petits. Cette page montre comment prendre le contrôle. Vous définissez une mise en page de colonnes par taille d’écran, inversez l’ordre sur écrans larges et montrez des éléments seulement sur certains appareils. L’exemple transforme une ligne de quatre colonnes en deux par deux sur tablettes.

La vidéo masque une photo sur téléphones, puis rétrécit la fenêtre pour la voir disparaître.

  ## Avant de commencer

- Une ligne à quatre colonnes égales sur la page ; voir [Lignes et colonnes](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/lignes-et-colonnes).

## Choisir une mise en page par taille d’écran

1. Survolez la ligne et cliquez l’icône de grille dans sa barre de contrôle. Le dialogue de mise en page s’ouvre avec un panneau **Medium devices (≥ 768px)**.
2. Cliquez sur **Add screen size**. Un second panneau s’ouvre, réglé sur **Extra small (< 576px)**.
3. Dans le menu déroulant de ce panneau, choisissez **Small devices (≥ 576px)**.
4. Cliquez sur **Custom Layout**, saisissez `1/2 + 1/2 + 1/2 + 1/2` et cliquez sur **Save**.
5. Cliquez sur **Save** sur la barre d’outils.

Quatre moitiés gardent les quatre colonnes et en mettent deux par ligne. La tuile à deux colonnes égales réduirait plutôt la ligne à deux colonnes sur chaque taille d’écran.

## Ce que vous voyez

Sur un ordinateur, les quatre colonnes restent sur une ligne. Rétrécissez la fenêtre du navigateur sous 768 pixels et elles passent deux par deux. Sous 576 pixels, elles s’empilent, une par ligne, dans l’ordre vu dans l’éditeur.

Une mise en page s’applique depuis sa taille d’écran vers le haut, jusqu’à ce qu’une taille plus grande ait sa propre mise en page. Chaque nouvelle ligne démarre avec une mise en page pour **Medium devices (≥ 768px)**, donc ses colonnes s’empilent sur téléphones et petites tablettes. **Remove screen size** dans un panneau supprime cette mise en page.

## Inverser l’ordre sur écrans larges

Ouvrez le menu **More** de la ligne, choisissez **Settings** et activez **Mirror row**. À partir de 768 pixels, les colonnes s’affichent dans l’ordre inverse ; sur les écrans plus petits, elles s’empilent dans l’ordre de l’éditeur.

Servez-vous-en pour des lignes alternées d’image et de texte. Mettez l’image en premier dans l’éditeur, pour que les téléphones la montrent au-dessus du texte, et inversez une ligne sur deux pour que les ordinateurs montrent l’image à droite.

## Montrer ou masquer un élément par taille d’écran

1. Ouvrez le menu **More** de l’élément et choisissez **Settings**.
2. Sous **HTML classes**, choisissez une pastille du groupe **Responsive Visibility**, par exemple **Hidden on extra small devices, phones (<576px)**.
3. Cliquez sur **Save**.

Chaque pastille **Hidden on** masque l’élément sur une seule taille d’écran. Chaque pastille **Visible on** le montre sur cette taille et le masque partout ailleurs.

## Tailles d’écran

| Libellé dans le dialogue de mise en page | Largeur d’écran |
|---|---|
| **Extra small (< 576px)** | Téléphones en portrait |
| **Small devices (≥ 576px)** | Grands téléphones, petites tablettes |
| **Medium devices (≥ 768px)** | Tablettes |
| **Large devices (≥ 992px)** | Ordinateurs portables |
| **Extra large (≥ 1200px)** | Ordinateurs de bureau |
| **Extra extra large (≥ 1400px)** | Grands écrans de bureau |

Un élément **Positioned layers** a son propre interrupteur **Responsive**, désactivé par défaut. Activez-le pour mettre la hauteur du canevas et son texte à l’échelle de la largeur de la fenêtre, pour que la composition garde ses proportions.

## Si vous ne voyez pas le changement

- **Les colonnes restent empilées sur une tablette.** La ligne n’a aucune mise en page pour cette taille d’écran, donc les colonnes s’empilent sous 768 pixels. Ouvrez l’icône de grille de la ligne, cliquez sur **Add screen size** et choisissez **Small devices (≥ 576px)**.
- **Un élément a disparu sur chaque taille d’écran.** Il porte deux pastilles **Visible on**, et chacune le masque là où l’autre le montre. Gardez-en une, ou utilisez des pastilles **Hidden on**, une par taille à masquer.
- **Mirror row ne fait rien sur un téléphone.** **Mirror row** s’applique à partir de 768 pixels. Pour changer l’ordre sur téléphones, déplacez plutôt les colonnes dans l’éditeur.

## Et ensuite ?

- [Lignes et colonnes](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/lignes-et-colonnes) : construire les lignes que vous rendez responsives ici.
- [Modifier une page sur votre téléphone ou tablette](/fr/hc/documentation/apprendre-dxpr-builder/modification/modification-sur-mobile) : vérifier et corriger les pages sur petit écran.
- [Faire aller une section de bord à bord](/fr/hc/documentation/apprendre-dxpr-builder/design/mises-en-page-pleine-largeur) : décider de la largeur de votre contenu.