--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/responsives-design' title: 'Layout auf Telefonen lauffähig machen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:02:09+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Ihre Seiten passen sich Telefonen und Tablets von selbst an: Spalten sitzen auf breiten Bildschirmen nebeneinander und stapeln sich auf kleinen. Diese Seite zeigt, wie Sie die Kontrolle übernehmen. Sie setzen ein Spaltenlayout pro Bildschirmgröße, spiegeln die Reihenfolge auf breiten Bildschirmen und zeigen Elemente nur auf manchen Geräten. Das Beispiel macht aus einer Zeile mit vier Spalten zwei mal zwei auf Tablets. Das Video verbirgt ein Foto auf Telefonen und verengt dann das Fenster, um es verschwinden zu lassen. 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: 'Layout auf Telefonen lauffähig machen' description: |- Ihre Seiten passen sich Telefonen und Tablets von selbst an: Spalten sitzen auf breiten Bildschirmen nebeneinander und stapeln sich auf kleinen. Diese Seite zeigt, wie Sie die Kontrolle übernehmen. Sie setzen ein Spaltenlayout pro Bildschirmgröße, spiegeln die Reihenfolge auf breiten Bildschirmen und zeigen Elemente nur auf manchen Geräten. Das Beispiel macht aus einer Zeile mit vier Spalten zwei mal zwei auf Tablets. Das Video verbirgt ein Foto auf Telefonen und verengt dann das Fenster, um es verschwinden zu lassen. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:02:09+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/de/hc/dokumentation/dxpr-builder-lernen/design/responsives-design' articleSection: Design-Leitfäden - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/responsives-design' description: |- Ihre Seiten passen sich Telefonen und Tablets von selbst an: Spalten sitzen auf breiten Bildschirmen nebeneinander und stapeln sich auf kleinen. Diese Seite zeigt, wie Sie die Kontrolle übernehmen. Sie setzen ein Spaltenlayout pro Bildschirmgröße, spiegeln die Reihenfolge auf breiten Bildschirmen und zeigen Elemente nur auf manchen Geräten. Das Beispiel macht aus einer Zeile mit vier Spalten zwei mal zwei auf Tablets. Das Video verbirgt ein Foto auf Telefonen und verengt dann das Fenster, um es verschwinden zu lassen. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Elemente gestalten](/de/hc/documentation/learn-dxpr-builder/element-settings) /[Design-Leitfäden](/de/hc/documentation/learn-dxpr-builder/design/overview) # Layout auf Telefonen lauffähig machen. DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden ## In diesem Leitfaden Verwandte Leitfäden - [Eine Zeile hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/zeilen-und-spalten) - [Eine Seite auf Smartphone oder Tablet bearbeiten](/de/hc/dokumentation/dxpr-builder-lernen/bearbeiten/mobiles-bearbeiten) - [Abschnitt über volle Breite laufen lassen](/de/hc/dokumentation/dxpr-builder-lernen/design/volle-breite-layouts) Ihre Seiten passen sich Telefonen und Tablets von selbst an: Spalten sitzen auf breiten Bildschirmen nebeneinander und stapeln sich auf kleinen. Diese Seite zeigt, wie Sie die Kontrolle übernehmen. Sie setzen ein Spaltenlayout pro Bildschirmgröße, spiegeln die Reihenfolge auf breiten Bildschirmen und zeigen Elemente nur auf manchen Geräten. Das Beispiel macht aus einer Zeile mit vier Spalten zwei mal zwei auf Tablets. Das Video verbirgt ein Foto auf Telefonen und verengt dann das Fenster, um es verschwinden zu lassen. ## Bevor Sie beginnen - Eine Zeile mit vier gleichen Spalten auf der Seite; siehe [Zeilen und Spalten](/de/hc/dokumentation/dxpr-builder-lernen/layout/zeilen-und-spalten). ## Layout pro Bildschirmgröße wählen 1. Zeigen Sie auf die Zeile und klicken Sie auf das Rastersymbol in ihrer Steuerungsleiste. Der Layout-Dialog öffnet sich mit einem Panel **Medium devices (≥ 768px)**. 2. Klicken Sie auf **Add screen size**. Ein zweites Panel öffnet sich, eingestellt auf **Extra small (< 576px)**. 3. Wählen Sie im Dropdown dieses Panels **Small devices (≥ 576px)**. 4. Klicken Sie auf **Custom Layout**, tippen Sie `1/2 + 1/2 + 1/2 + 1/2` und klicken Sie auf **Save**. 5. Klicken Sie in der Symbolleiste auf **Save**. Vier Halbe behalten alle vier Spalten und legen zwei pro Zeile. Die Kachel mit zwei gleichen Spalten würde die Zeile auf jeder Bildschirmgröße auf zwei Spalten stutzen. ## Was Sie sehen Auf einem Desktop sitzen die vier Spalten weiterhin in einer Zeile. Verengen Sie das Browserfenster unter 768 Pixel und sie brechen zu zweit um. Unter 576 Pixeln stapeln sie sich, eine pro Zeile, in der Reihenfolge, die Sie im Editor sehen. Ein Layout gilt ab seiner Bildschirmgröße aufwärts, bis eine größere Bildschirmgröße ein eigenes Layout hat. Jede neue Zeile beginnt mit einem Layout für **Medium devices (≥ 768px)**, daher stapeln sich ihre Spalten auf Telefonen und kleinen Tablets. **Remove screen size** in einem Panel löscht dieses Layout wieder. ## Reihenfolge auf breiten Bildschirmen spiegeln Öffnen Sie das Menü **More** der Zeile, wählen Sie **Settings** und schalten Sie **Mirror row** ein. Ab 768 Pixeln zeigen sich die Spalten in umgekehrter Reihenfolge; auf kleineren Bildschirmen stapeln sie sich in Editor-Reihenfolge. Nutzen Sie es für alternierende Zeilen aus Bild und Text. Stellen Sie das Bild im Editor an erste Stelle, sodass Telefone es über dem Text zeigen, und spiegeln Sie jede zweite Zeile, sodass Desktops das Bild rechts zeigen. ## Element pro Bildschirmgröße zeigen oder verbergen 1. Öffnen Sie das Menü **More** des Elements und wählen Sie **Settings**. 2. Wählen Sie unter **HTML classes** einen Chip aus der Gruppe **Responsive Visibility**, zum Beispiel **Hidden on extra small devices, phones (<576px)**. 3. Klicken Sie auf **Save**. Jeder Chip **Hidden on** verbirgt das Element auf nur einer Bildschirmgröße. Jeder Chip **Visible on** zeigt es auf dieser einen Größe und verbirgt es überall sonst. ## Bildschirmgrößen | Bezeichnung im Layout-Dialog | Bildschirmbreite | |---|---| | **Extra small (< 576px)** | Telefone hochkant | | **Small devices (≥ 576px)** | Große Telefone, kleine Tablets | | **Medium devices (≥ 768px)** | Tablets | | **Large devices (≥ 992px)** | Laptops | | **Extra large (≥ 1200px)** | Desktops | | **Extra extra large (≥ 1400px)** | Große Desktops | Ein Element **Positioned layers** hat einen eigenen Schalter **Responsive**, standardmäßig aus. Schalten Sie ihn ein, um Canvas-Höhe und Text mit der Fensterbreite zu skalieren, damit die Komposition ihre Proportionen behält. ## Wenn Sie die Änderung nicht sehen - **Spalten stapeln sich weiterhin auf einem Tablet.** Die Zeile hat kein Layout für diese Bildschirmgröße, daher stapeln sich die Spalten unter 768 Pixeln. Öffnen Sie das Rastersymbol der Zeile, klicken Sie auf **Add screen size** und wählen Sie **Small devices (≥ 576px)**. - **Ein Element ist auf jeder Bildschirmgröße verschwunden.** Es trägt zwei Chips **Visible on**, und jeder verbirgt es, wo der andere es zeigt. Behalten Sie einen, oder nutzen Sie Chips **Hidden on**, einen pro zu verbergender Größe. - **Mirror row tut nichts auf einem Telefon.** **Mirror row** wirkt ab 768 Pixeln. Um die Reihenfolge auf Telefonen zu ändern, verschieben Sie stattdessen die Spalten im Editor. ## Wie geht es weiter? - [Zeilen und Spalten](/de/hc/dokumentation/dxpr-builder-lernen/layout/zeilen-und-spalten): bauen Sie die Zeilen, die Sie hier responsiv machen. - [Seite auf Telefon oder Tablet bearbeiten](/de/hc/dokumentation/dxpr-builder-lernen/bearbeiten/mobiles-bearbeiten): Seiten auf kleinem Bildschirm prüfen und richten. - [Abschnitt von Kante zu Kante](/de/hc/dokumentation/dxpr-builder-lernen/design/volle-breite-layouts): entscheiden, wie breit Ihr Inhalt läuft.