让布局适配手机.

您的页面自动适配手机和平板：宽屏上列并排，窄屏上堆叠。本页演示如何接管控制。您按屏幕尺寸设置列布局，在宽屏上镜像顺序，只在某些设备上显示元素。示例将四列的行在平板上变成两两排列。

该视频在手机上隐藏一张照片，再收窄窗口展示它消失。

开始之前

• 页面上有四列等宽的行；请参阅 行和列。

按屏幕尺寸选择布局

1. 悬停行，点击其控制栏中的网格图标。布局对话框打开在 Medium devices (≥ 768px) 面板。
2. 点击 Add screen size。第二面板打开，设为 Extra small (< 576px)。
3. 在该面板的下拉菜单中选择 Small devices (≥ 576px)。
4. 点击 Custom Layout，输入 1/2 + 1/2 + 1/2 + 1/2 并点击 Save。
5. 点击工具栏上的 Save。

四个二分之一保留全部四列，每行放两列。两列等宽的磁贴反而会在所有屏幕尺寸上把行减为两列。

您会看到的内容

桌面端四列仍在一行。将浏览器窗口收窄到 768 像素以下，它们两两换行。低于 576 像素，它们堆叠，每行一列，顺序与编辑器中一致。

布局从其屏幕尺寸起向上适用，直到有自己布局的更大尺寸。每个新行都以 Medium devices (≥ 768px) 的一个布局开始，因此其列在手机和小平板上堆叠。面板中的 Remove screen size 删除该布局。

在宽屏上镜像顺序

打开行的 More 菜单，选择 Settings 并打开 Mirror row。768 像素起，列倒序显示；小屏幕上按编辑器顺序堆叠。

用它做图文交替的行。在编辑器中把图片放前面，手机上图片显示在文本上方；将每隔一行镜像，桌面端图片显示在右侧。

按屏幕尺寸显示或隐藏元素

1. 打开元素的 More 菜单并选择 Settings。
2. 在 HTML classes 下从 Responsive Visibility 分组中选一个色块，例如 Hidden on extra small devices, phones (<576px)。
3. 点击 Save。

每个 Hidden on 色块只在一个屏幕尺寸上隐藏元素。每个 Visible on 色块只在该尺寸上显示元素，别处都隐藏。

屏幕尺寸

一个 Positioned layers 元素有自己的 Responsive 开关，默认关闭。打开后画布高度和其中文本随窗口宽度缩放，构图保持比例。

如果您看不到变化

• 列在平板上仍堆叠。 该行没有该屏幕尺寸的布局，因此 768 像素以下列堆叠。请打开行的网格图标，点击 Add screen size 并选择 Small devices (≥ 576px)。
• 元素在所有屏幕尺寸上都不见了。 它带了两个 Visible on 色块，互相把对方显示的地方隐藏了。请保留一个，或用 Hidden on 色块，每隐藏一个尺寸用一个。
• Mirror row 在手机上无效。 Mirror row 从 768 像素起有效。要更改手机上的顺序，请在编辑器中移动列。

接下来做什么？

• 行和列：搭建您在此做响应的行。
• 在手机或平板上编辑页面：在小屏幕上检查和修复页面。
• 让版块铺到边缘：决定内容有多宽。