我对CSS Flexbox还是很陌生，但是我试图创建一个水平卡，其中图像在左侧，文本/按钮在右侧。当网站按比例缩小（供移动使用）时，行项目应换行，并且图像应位于文本的顶部。我尝试将wrap属性设置为wrap，但是当它只应包装在较小的屏幕上时，它将包装在大屏幕上。参见下面的代码：
* {
margin: 0;
padding: 0;
}
#box {
padding: 20px;
}
img {
width: 200px;
}
#outer-container {
display: flex;
flex-wrap: wrap;
border: solid 1px;
width: 70%;
margin: auto;
}
#inner-container {
border: solid 1px;
display: flex;
justify-content: space-between;
flex-direction: column;
}<div id="outer-container">
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
<div id="inner-container">
<div>
<h3>Heading</h3>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis …