css Flexbox: переключить ось текста карты при сжатии

Question

У меня есть карта, т. Е. Компонент с изображением и областью для текста, которую я хочу отобразить по горизонтали (img-area -> text-area) на больших экранах и по вертикали (text-area под img-area) на меньших экранах.

Если я уменьшу размеры страницы, я смогу заставить текстовую область перенести на новую строку, но есть точка, где текстовая область шире, чем изображение, вызывая нежелательный эффект. Я хочу, чтобы текстовая область сразу переходила под изображение.

Портфолио. 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>

Портфолио. 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;
}

Answer 1

Попробуйте использовать фиксированную ширину: 50% в левом и правом столбце вместо растяжения flexbox, а затем сделайте его 100% с помощью медиазапроса, когда нужно, чтобы он находился один под другим. Кроме того, вы можете загрузить изображение в левом столбце, используя свойство background-image вместо тега image.