improve layout docs

examples/docs/en-US/layout.md

@@ -215,7 +215,7 @@ You can specify column offsets.
 
 ### Alignment
 
-Flexible alignment of columns.
+Use the flex layout to make flexible alignment of columns.
 
 ::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
 ```html
@@ -276,6 +276,40 @@ Flexible alignment of columns.
 ```
 :::
 
+### Responsive Layout
+
+Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.
+
+::: demo
+```html
+<el-row :gutter="10">
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+</style>
+```
+:::
+
 ### Row Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

examples/docs/zh-CN/layout.md

@@ -245,7 +245,7 @@
 
 ### 对齐方式
 
-对分栏进行灵活的对齐。
+通过 `flex` 布局来对分栏进行灵活的对齐。
 
 ::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
 ```html
@@ -306,6 +306,40 @@
 ```
 :::
 
+### 响应式布局
+
+参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：`xs` `sm` `md` `lg`。
+
+::: demo
+```html
+<el-row :gutter="10">
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+</style>
+```
+:::
+
 ### Row Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |