Html 如何制作响应性水平列表

我想实现一个水平列表，当屏幕变小时，项目会相互重叠，我解释说，糟糕的是，我想要像堆栈溢出那样的东西：

我尝试了一些bootstrap4，但它似乎不起作用，当屏幕变小时，列表会扩展文档，导致非常糟糕的移动用户体验，有解决方案吗

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Cras justo odio
Dapibus ac设施在
Morbi leo risus

.list组{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
最大宽度：1000px；
}
.列表组项目{
最小宽度：200px；
}

Cras justo odio
Dapibus ac设施在
Morbi leo risus
Cras justo odio
Dapibus ac设施在
Cras justo odio
Dapibus ac设施在

767px屏幕下方的响应列表

ul{
列表样式类型：无；
}
ulli{
显示：内联块；
边框：1px纯灰；
填充物：5px；
颜色：蓝色；
}
@仅介质屏幕和（最大宽度：767px）{
保险商实验室{
宽度：400px；
}
ulli{
颜色：红色；
显示：块；
}
}

Cras justo odio
Dapibus ac设施在
Morbi leo risus

请您向我们展示适用于此的CSS，以及此列表的容器元素，因为这可能还需要额外的CSS来实现此功能。

li{display:block；}

？我将max width更改为100vw，而不是1000px，并从样式表中删除了.list group item类，现在它完全按照我的要求工作，谢谢你的帮助