css Flexbox：收缩时切换卡文本轴

Question

我有一张卡片，即带有图像和文本区域的组件，我想在较大的屏幕上水平显示（img-area-> text-area），垂直显示（img-area下的text-area）。较小的屏幕。

如果缩小页面尺寸，我可以使文本区域换行到新行，但是有一点会导致文本区域比图像宽，从而导致不良效果。我希望文本区域立即跳到图像下方。

Portfolio.js渲染

            <div className="property">
                <div className="property-img">
                    <img src="/brick_wall.jpg" />
                </div>                       
                <div className="property-text">
                    <h1>Lorem Ipsum</h1>
                    <h3>Lorem Ipsum</h3>

                    <p>Lorem ipsum ...</p>
                </div>
            </div>

Portfolio.css

.property 
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  box-shadow: 0 0 7px #333;
  margin: 20px;


.property-img 
  display: flex;
  flex-direction: column;
  flex-basis: 500px;


.property-img img 
  max-width: 100%;
  max-height: 100%;

  align-self: flex-start;
  flex-grow: 2;
  flex-shrink: 2;




.property-text
    background: white;
    padding: 20px 20px;
    flex-basis: 480px;
    flex-grow: 2;
    flex-shrink: 2;