1. 首先，你需要定义你的断点。在下面的示例中，我定义了两个断点：one（移动）和two（桌面），并为它们分别设置了最大宽度。

@media only screen and (max-width: 600px){ /* Styles for 'one' breakpoint */ }

@media only screen and (min-width: 601px) and (max-width: 900px){ /* Styles for 'two' breakpoint */ }

2. 然后，你需要使用CSS Flexbox或Grid来重新排列你的标记内容。在下面的示例中，我使用Flexbox并将其包装在一个包含你的标记HTML的父元素中。

HTML:

CSS:

.tag-wrapper { display: flex; flex-wrap: wrap; }

.tag { flex: 1 0 25%; }

@media only screen and (max-width: 600px){ /* 带有 'one' 断点的样式 */ .tag { flex: 1 0 50%; } }

@media only screen and (min-width: 601px) and (max-width: 900px){ /* 带有 'two' 断点的样式 */ .tag { flex: 1 0 33.333%; } }

在上面的代码中，.tag-wrapper是一个flex容器，.tag类指定每个标签的样式。在较小的屏幕上，标签会变成50％的宽度，而较大的屏幕则会变成33.333％的宽度。