Docs: update responsive layout for color page (#9993)

* Color: fix demo-color-box in docs respnsive layout

* Update color.md

* Update color.md

* Update color.md

examples/docs/en-US/color.md

@@ -2,6 +2,7 @@
   .demo-color-box {
     border-radius: 4px;
     padding: 20px;
+    margin: 5px 0;
     height: 74px;
     box-sizing: border-box;
     color: #fff;
@@ -16,6 +17,7 @@
   .demo-color-box-group {
     .demo-color-box {
       border-radius: 0;
+      margin: 0;
     }
     .demo-color-box:first-child {
       border-radius: 4px 4px 0 0;
@@ -80,7 +82,7 @@ Element uses a specific set of palettes to specify colors to provide a consisten
 The main color of Element is bright and friendly blue.
 
 <el-row :gutter="12">
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
   </el-col>
 </el-row>
@@ -90,16 +92,16 @@ The main color of Element is bright and friendly blue.
 Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)
 
 <el-row :gutter="12">
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
   </el-col>
 </el-row>
@@ -109,7 +111,7 @@ Besides the main color, you need to use different scene colors in different scen
 Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.
 
 <el-row :gutter="12">
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
       <div class="demo-color-box bg-text-primary">Primary Text<div class="value">#303133</div></div>
       <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#606266</div></div>
@@ -117,7 +119,7 @@ Neutral colors are for text, background and border colors. You can use different
       <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#C0C4CC</div></div>
     </div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
       <div class="demo-color-box bg-border-base">Base Border<div class="value">#DCDFE6</div></div>
       <div class="demo-color-box bg-border-light">Light Border<div class="value">#E4E7ED</div></div>

examples/docs/es/color.md

@@ -2,6 +2,7 @@
   .demo-color-box {
     border-radius: 4px;
     padding: 20px;
+    margin: 5px 0;
     height: 74px;
     box-sizing: border-box;
     color: #fff;
@@ -16,6 +17,7 @@
   .demo-color-box-group {
     .demo-color-box {
       border-radius: 0;
+      margin: 0;
     }
     .demo-color-box:first-child {
       border-radius: 4px 4px 0 0;
@@ -80,7 +82,7 @@ Element utiliza un conjunto de paletas para especificar colores, y así, proporc
 El color principal de Element es el azul brillante y amigable.
 
 <el-row :gutter="12">
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-blue">Azul<div class="value">#409EFF</div></div>
   </el-col>
 </el-row>
@@ -90,16 +92,16 @@ El color principal de Element es el azul brillante y amigable.
 Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).
 
 <el-row :gutter="12">
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-success">Éxito<div class="value">#67C23A</div></div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-warning">Precaución<div class="value">#E6A23C</div></div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-danger">Peligro<div class="value">#F56C6C</div></div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
   </el-col>
 </el-row>
@@ -109,7 +111,7 @@ Además del color principal, se necesitan utilizar distintos colores para difere
 Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.
 
 <el-row :gutter="12">
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
       <div class="demo-color-box bg-text-primary">Texto primario<div class="value">#303133</div></div>
       <div class="demo-color-box bg-text-regular">Texto regular<div class="value">#606266</div></div>
@@ -117,7 +119,7 @@ Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes col
       <div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#C0C4CC</div></div>
     </div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
       <div class="demo-color-box bg-border-base">Borde base<div class="value">#DCDFE6</div></div>
       <div class="demo-color-box bg-border-light">Borde ligero<div class="value">#E4E7ED</div></div>

examples/docs/zh-CN/color.md

@@ -2,6 +2,7 @@
   .demo-color-box {
     border-radius: 4px;
     padding: 20px;
+    margin: 5px 0;
     height: 74px;
     box-sizing: border-box;
     color: #fff;
@@ -16,6 +17,7 @@
   .demo-color-box-group {
     .demo-color-box {
       border-radius: 0;
+      margin: 0;
     }
     .demo-color-box:first-child {
       border-radius: 4px 4px 0 0;
@@ -81,7 +83,7 @@ Element 为了避免视觉传达差异，使用一套特定的调色板来规定
 Element 主要品牌颜色是鲜艳、友好的蓝色。
 
 <el-row :gutter="12">
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
   </el-col>
 </el-row>
@@ -91,16 +93,16 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
 
 <el-row :gutter="12">
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
   </el-col>
 </el-row>
@@ -110,7 +112,7 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
 
 <el-row :gutter="12">
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
       <div class="demo-color-box bg-text-primary">主要文字<div class="value">#303133</div></div>
       <div class="demo-color-box bg-text-regular">常规文字<div class="value">#606266</div></div>
@@ -118,7 +120,7 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
       <div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#C0C4CC</div></div>
     </div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
       <div class="demo-color-box bg-border-base">一级边框<div class="value">#DCDFE6</div></div>
       <div class="demo-color-box bg-border-light">二级边框<div class="value">#E4E7ED</div></div>