# Two columns (swapped on phones)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

Der ThemeWare® CMS-Block "**Zwei Spalten (auf Handys getauscht)**" (50% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FXzgwk6hcIMCO2yQ0GB13%2Fimage.png?alt=media&#x26;token=e0f86c6c-78d3-4960-80c1-ef9b1225880e" alt=""><figcaption><p>ThemeWare® CMS block "Two columns (swapped on phones)" [Pro]</p></figcaption></figure>

Der CMS-Block "Zwei Spalten (auf Handys getauscht)" ist eine Variante vom CMS-Block "Zwei Spalten" (siehe [two-columns-1](https://docs.themeware.design/additional-features/cms-extensions/cms-blocks/columns/two-columns-1 "mention")). Hier unterscheidet sich lediglich die Anordnung der beiden Spalten in mobilen Viewports. In dieser Variante wird die zweite Spalte oberhalb der ersten Spalte angeordnet und nicht darunter.

## Example

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FoBAME2vFSOUviwCshCSa%2Fcms-block--grid-two-column-swapped.png?alt=media&#x26;token=c1ba17dc-d132-48b9-8512-9d291be1c607" alt=""><figcaption><p>ThemeWare® CMS block "Two columns (swapped on phones)"</p></figcaption></figure>

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FyaOHyuF22QXX0d7G2ETx%2Fimage.png?alt=media&#x26;token=392078d7-ac12-4113-a8e3-b689b33085b3" alt=""><figcaption><p>Links: "Zwei Spalten" | Rechts: "Zwei Spalten (auf Handys getauscht)"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.) modifizieren.
{% endhint %}

***

## Demo

You can find some examples of use in our demo shops:

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}