在大屏显示垂直列列表，在移动屏幕中显示堆叠下拉列表

Question

需要一种有效的解决方案来在桌面/大屏幕上显示垂直列列表，并且必须在移动屏幕上显示为堆叠下拉列表。 (html/css/bootstrap)

请参考图片。

桌面/大屏幕：

手机屏幕：

提前致谢。

Answer 1

将flexbox与media-queries结合使用，

将display: flex; 应用于列表容器。并应用flex-direction: column; 列出所需媒体查询中的容器。

Answer 2

您可以像这样使用媒体查询：

@media (max-width:1000px){类名{属性}}