---
url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/design/responsive-design'
title: 'Działanie układu na telefonach | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:38:11+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Twoje strony same dopasowują się do telefonów i tabletów: kolumny stoją obok siebie na szerokich ekranach i układają w stos na małych. Ta strona pokazuje, jak przejąć kontrolę. Ustawiasz układ kolumn dla rozmiaru ekranu, odbijasz kolejność na szerokich ekranach i pokazujesz elementy tylko na niektórych urządzeniach. Przykład zamienia wiersz czterech kolumn w dwa po dwa na tabletach.
  Film ukrywa zdjęcie na telefonach, potem zwęża okno, aby pokazać jego zniknięcie.
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-24T11:38:11+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Działanie układu na telefonach'
      description: |-
        Twoje strony same dopasowują się do telefonów i tabletów: kolumny stoją obok siebie na szerokich ekranach i układają w stos na małych. Ta strona pokazuje, jak przejąć kontrolę. Ustawiasz układ kolumn dla rozmiaru ekranu, odbijasz kolejność na szerokich ekranach i pokazujesz elementy tylko na niektórych urządzeniach. Przykład zamienia wiersz czterech kolumn w dwa po dwa na tabletach.
        Film ukrywa zdjęcie na telefonach, potem zwęża okno, aby pokazać jego zniknięcie.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:38:11+0000'
      dateModified: '2026-10-24T11:38: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/pl/hc/documentation/learn-dxpr-builder/design/responsive-design'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/design/responsive-design'
      description: |-
        Twoje strony same dopasowują się do telefonów i tabletów: kolumny stoją obok siebie na szerokich ekranach i układają w stos na małych. Ta strona pokazuje, jak przejąć kontrolę. Ustawiasz układ kolumn dla rozmiaru ekranu, odbijasz kolejność na szerokich ekranach i pokazujesz elementy tylko na niektórych urządzeniach. Przykład zamienia wiersz czterech kolumn w dwa po dwa na tabletach.
        Film ukrywa zdjęcie na telefonach, potem zwęża okno, aby pokazać jego zniknięcie.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 'Strona Główna'
            item: 'https://dxpr.com/pl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pl
---
[Help Center](/pl/hc)/[Documentation](/pl/hc/documentation) /[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) # Działanie układu na telefonach.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [Dodawanie wiersza.](/pl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [Mobile editing](/hc/documentation/learn-dxpr-builder/editing/mobile-editing)
- [Uruchom sekcję od krawędzi do krawędzi](/pl/hc/documentation/learn-dxpr-builder/design/full-width-layouts)

Twoje strony same dopasowują się do telefonów i tabletów: kolumny stoją obok siebie na szerokich ekranach i układają w stos na małych. Ta strona pokazuje, jak przejąć kontrolę. Ustawiasz układ kolumn dla rozmiaru ekranu, odbijasz kolejność na szerokich ekranach i pokazujesz elementy tylko na niektórych urządzeniach. Przykład zamienia wiersz czterech kolumn w dwa po dwa na tabletach.

Film ukrywa zdjęcie na telefonach, potem zwęża okno, aby pokazać jego zniknięcie.

  ## Zanim zaczniesz

- Wiersz z czterema równymi kolumnami na stronie; zobacz [wiersze i kolumny](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns).

## Wybór układu dla rozmiaru ekranu

1. Najedź na wiersz i kliknij ikonę siatki na jego pasku narzędzi. Otworzy się okno układu z panelem **Medium devices (≥ 768px)**.
2. Kliknij **Add screen size**. Otworzy się drugi panel, ustawiony na **Extra small (< 576px)**.
3. W liście tego panelu wybierz **Small devices (≥ 576px)**.
4. Kliknij **Custom Layout**, wpisz `1/2 + 1/2 + 1/2 + 1/2` i kliknij **Save**.
5. Kliknij **Save** na pasku narzędzi.

Cztery połówki zachowują wszystkie cztery kolumny i kładą dwie w każdym wierszu. Kafelek z dwiema równymi kolumnami ściąłby wiersz do dwóch kolumn w każdym rozmiarze ekranu.

## Co widzisz

Na desktopie cztery kolumny nadal stoją w jednej linii. Zwęź okno przeglądarki poniżej 768 pikseli, a zawiną się dwa po dwa. Poniżej 576 pikseli układają się w stos, po jednym w wierszu, w kolejności widzianej w edytorze.

Układ obowiązuje od swojego rozmiaru ekranu w górę, dopóki większy rozmiar ekranu nie ma własnego układu. Każdy nowy wiersz zaczyna z jednym układem dla **Medium devices (≥ 768px)**, więc jego kolumny układają się w stos na telefonach i małych tabletach. **Remove screen size** w panelu ponownie usuwa ten układ.

## Odbicie kolejności na szerokich ekranach

Otwórz menu **More** wiersza, wybierz **Settings** i włącz **Mirror row**. Od 768 pikseli w górę kolumny pokazują się w odwrotnej kolejności; na mniejszych ekranach układają się w stos w kolejności edytora.

Użyj tego do naprzemiennych wierszy obrazu i tekstu. Umieść obraz jako pierwszy w edytorze, aby telefony pokazywały go nad tekstem, i odbijaj co drugi wiersz, aby desktopy pokazywały obraz po prawej.

## Pokazywanie i ukrywanie elementu dla rozmiaru ekranu

1. Otwórz menu **More** elementu i wybierz **Settings**.
2. W **HTML classes** wybierz chip z grupy **Responsive Visibility**, na przykład **Hidden on extra small devices, phones (<576px)**.
3. Kliknij **Save**.

Każdy chip **Hidden on** ukrywa element tylko w jednym rozmiarze ekranu. Każdy chip **Visible on** pokazuje go w tym jednym rozmiarze i ukrywa wszędzie indziej.

## Rozmiary ekranu

| Etykieta w oknie układu | Szerokość ekranu |
|---|---|
| **Extra small (< 576px)** | Telefony w pionie |
| **Small devices (≥ 576px)** | Duże telefony, małe tablety |
| **Medium devices (≥ 768px)** | Tablety |
| **Large devices (≥ 992px)** | Laptopy |
| **Extra large (≥ 1200px)** | Desktopy |
| **Extra extra large (≥ 1400px)** | Duże desktopy |

Element **Positioned layers** ma własny przełącznik **Responsive**, domyślnie wyłączony. Włącz go, aby skalować wysokość kanwy i jej tekst z szerokością okna, aby kompozycja zachowała proporcje.

## Jeśli nie widzisz zmiany

- **Kolumny nadal układają się w stos na tablecie.** Wiersz nie ma układu dla tego rozmiaru ekranu, więc kolumny układają się w stos poniżej 768 pikseli. Otwórz ikonę siatki wiersza, kliknij **Add screen size** i wybierz **Small devices (≥ 576px)**.
- **Element zniknął w każdym rozmiarze ekranu.** Niesie dwa chipy **Visible on**, a każdy ukrywa go tam, gdzie drugi go pokazuje. Zachowaj jeden albo użyj chipów **Hidden on**, po jednym na rozmiar do ukrycia.
- **Mirror row nic nie robi na telefonie.** **Mirror row** działa od 768 pikseli w górę. Aby zmienić kolejność na telefonach, przenieś kolumny w edytorze.

## Co dalej?

- [Wiersze i kolumny](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): zbuduj wiersze, które tutaj uniezależniasz od rozdzielczości.
- [Edytowanie strony na telefonie albo tablecie](/hc/documentation/learn-dxpr-builder/editing/mobile-editing): sprawdzaj i naprawiaj strony na małym ekranie.
- [Uruchomienie sekcji od krawędzi do krawędzi](/hc/documentation/learn-dxpr-builder/design/full-width-layouts): zdecyduj, jak szeroko biegnie treść.