docs: add documentation in grid about changing the breakpoints values (#39689)

* Add documentation in grid about changing the breakpoints values

* Add sandbox demo

* Update components/grid/index.zh-CN.md

Co-authored-by: Amumu <yoyo837@hotmail.com>

Co-authored-by: Amumu <yoyo837@hotmail.com>

components/grid/index.en-US.md

@@ -81,6 +81,8 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 | xl | `screen ≥ 1200px`, could be a `span` value or an object containing above props | number \| object | - |  |
 | xxl | `screen ≥ 1600px`, could be a `span` value or an object containing above props | number \| object | - |  |
 
+You can modify the breakpoints values using by modifying `screen[XS|SM|MD|LG|XL|XXL]` with [theme customization](/docs/react/customize-theme) (since 5.1.0, [sandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-bjojbx?file=/index.js)).
+
 The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including `occasionally part`).
 
 <style>

components/grid/index.zh-CN.md

@@ -80,6 +80,8 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | xl | `屏幕 ≥ 1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - |  |
 | xxl | `屏幕 ≥ 1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - |  |
 
+您可以使用 [主题定制](/docs/react/customize-theme-cn) 修改 `screen[XS|SM|MD|LG|XL|XXL]` 来修改断点值（自 5.1.0 起，[codesandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-bjojbx?file=/index.js)）。
+
 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
 
 <style>