Html 使表格内容响应屏幕大小

我正在制作一个包含图片和文本内容（四行五列）的表格，并且正在寻找使内容适应屏幕而不必从左向右滚动阅读的最佳方法。因此，在笔记本电脑上，它会显示为五列，但在移动屏幕上可能会显示一列或两列

我看到过一些建议，比如制作一堆容器、div等，然后手动将它们像表格一样在页面上对齐。我不确定如何做到这一点，以达到与我目前的表相同的效果。我将非常感谢任何帮助和建议

（无引导）

不要告诉你“…只需使用引导程序”（155KB的内容你几乎无法使用和理解，并且浪费了宝贵的时间来搜索如何使用）

这里有一个小学校，如何负责任地思考，以及真正了解你在做什么

首先考虑移动设备： 添加到页面的标题：

<meta name="viewport" content="width=device-width, initial-scale=1">

调整大小时，@媒体覆盖逻辑如何工作？这个简单的例子将告诉大家：

XS +------------------->
SM     +--------------->    
MD          +---------->
LG               +----->

Roko CB的响应表示例
形象
颜色
样品
描述
价格
颜色：#faf
样本：170x80px
小指
价格:2.13
颜色：#ffa
样本：170x80px
描述：耶利
价格：1.90
颜色：#afa
样本：170x80px
描述：绿色
价格:0.90
颜色：#aaf
样本：170x80px
描述：紫色的
价格：1.00

是响应性最好的选择

XS +------------------->
SM     +--------------->    
MD          +---------->
LG               +----->

<div class=".hide-xs">You'll never see me :(</div><!-- Will be hidden on all sizes! -->
<div class=".hide-xs .show-md">:)</div><!-- hidden on mobile(xs) and tablet(sm) but visible on Desktop(md) and Large desktop(lg) -->