CSS在图像旁边放置文本，使其具有移动响应性

Question

我使用此代码：My Code

<div style="display:inline-block;vertical-align:top;"><a href="domain.tld"><img src="https://i.imgur.com/J5azqpQ.jpg" alt="This is a cool picture" width="300px" /> </a></div><div style="display:inline-block;"><div>13/11/2019</div><div><strong>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</strong></div><div><a href="*|FEEDITEM:URL|*">👉 Learn More</a><br></div></div><hr><div style="display:inline-block;vertical-align:top;"><a href="domain.tld"><img src="https://i.imgur.com/HkwIsNL.jpg" alt="This is a cool picture" width="300px" /> </a></div><div style="display:inline-block;"><div>13/11/2019</div><div><strong>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</strong></div><div><a href="*|FEEDITEM:URL|*">👉 Learn More</a><br></div>

我想要实现的是，当您从PC /笔记本电脑/平板电脑上查看代码时，能够在图片旁边显示文本，如图1所示。我需要文本在所有移动设备上的图像下方（图2）。没有媒体查询，有没有可能实现这一目标的方法？因为某些手机的宽度大于1080像素，所以宽度与某些旧PC相同。

我想以某种方式确定用户使用手机，以便如果用户使用PC或手机，我可以实现不同的CSS。

我分享了2张照片，以便您理解我的意思。on PC (Picture 1)on Mobile (Picture 2)

任何帮助将不胜感激！

Answer 1

应该是这样的只是随心所欲地调整元素的宽度]

css

.parent-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

html

<div class"parent-container>
  <img />
  <div class="text-container">
  <!-- text elements here -->
  </div>
</div>