Html 如何在没有css文件的情况下向flexbox div元素添加响应

正如标题所示，我一直在想，您是否可以在不使用外部css文件的情况下向div flexbox元素添加响应，而直接将其放入div样式中。我的代码如下所示，在桌面版本中，文本应位于图像的右侧，但在移动/平板电脑版本中，我希望将其置于图像下方。我如何增加响应能力，因为现在在手机上查看时，它会溢出元素

<div style="display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 20px;">
     <img src="image on the left side">
     <div style="flex-direction: column;">
        <b>title to the right of the image</b>
        <p>description under title</p>
     </div>
</div>

图片右侧的标题
标题下的说明

媒体查询正在使用

@Media

规则添加CSS属性，并且：

@media

CSS at规则可用于基于一个或多个媒体查询的结果应用部分样式表。使用它，您可以指定一个媒体查询和一个CSS块，当且仅当媒体查询与正在使用内容的设备匹配时才应用于文档

因此，如果在

中没有内部

标记或单独的样式表文件，就不可能使用它。

“没有外部CSS文件”：是的，将相应的CSS规则放入HTML文档本身的

标记中（最好在

中，但也可以在

正文中使用）

例如：



.a{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
边缘底部：20px；
}
.b{
显示器：flex；
弯曲方向：立柱；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.a{
弯曲方向：立柱；
}
}
图片右侧的标题
标题下的说明

最小宽度
和
弹性增长
可能是一个提示：



图片右侧的标题
标题下的说明