Imej responsif dan teks Div sebelah menyebelah

Question

Jadi saya cuba mencipta templat di mana satu div ialah imej dan satu lagi adalah teks dengan latar belakang. Sekarang saya mahu menjadikan templat ini responsif supaya teks berada di bawah imej pada lebar px tertentu. Melalui stackoverflow, saya melihat banyak siaran yang mengatakan anda harus menggunakan Flexbox. Saya cuba tetapi saya tidak dapat melakukannya dengan betul.

Jadi pada desktop ia sepatutnya kelihatan seperti ini: https://i.stack.imgur.com/HDehv.jpg Pada telefon pintar ia harus melompat ke sini https://i.stack.imgur.com/D4VOh. .jpg

Saya memerlukan margin pada kedua-dua belah pihak, sekurang-kurangnya pada versi desktop. Sekarang masalah saya ialah imej saya tidak mempunyai had di tapak saya dan menjadi terlalu besar dan penukaran automatik kepada baris sedang berlaku (setahu saya).

Kod saya ada di sini: https://jsfiddle.net/wqesp83a/

.container {
  display: inline-flex;
  border: 1px solid black;
  margin: 5%;
  width: 90%;
}

.flex-direction {
  flex-direction: row;
}

.div1 {
  display: flex;
  border-right: 1px solid black;
}

h {
  color: #90bd49;
  font-size: 30px;
}

p {
  color: #333333;
  font-size: 16px;
}

.div2 {
  display: flex;
  background-color: #fff;
  max-width: 50%;
  padding: 1%;
  background-color: #e3e3e3;
}

span {
  font-size: 16px;
  text-align: left;
}

@media only screen and (min-width: 0px) and (max-width: 500px) {
  .flex-direction {
    flex-direction: column;
  }
  .div1 {
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid black;
  }
  .div2 {
    max-width: 100%;
  }
  .container {
    margin: 0%;
  }

<div class="container flex-direction">
  <div class="div1"><span><img alt="Fotoabzüge" src="https://s3.eu-central-1.amazonaws.com//pbx-sw-profotolab/media/79/95/4c/1673964627/bild4_(1).jpg" width="100%" height="100%"  /></span></div>
  <div class="div2"><span><h>Lorem ipsum</h> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p> </span></div>
</div>

Saya cuba mengehadkan lebar dan ketinggian div dan imej, tetapi sama ada ia tidak membantu atau saya akan memecahkan semuanya lagi. Jika sesiapa boleh membantu saya melihat kesilapan saya, saya akan sangat berterima kasih.

Answer 1

grid Datang untuk menyelamatkan:

grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))

Lajur grid akan dibuat untuk setiap kanak-kanak bekas, asalkan mereka boleh memanjang hingga 400px lebar. Apabila tidak ada ruang yang mencukupi untuk item grid dengan lebar 400px, ia akan membalut ke dalam lajur. Hanya tukar nilai px dengan apa sahaja yang anda mahu.

grid-auto-rows: 1fr akan menjadikan ketinggian dua lajur sama.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: 1fr;
  border: 1px solid black;
  margin: 5%;
  width: 90%;
}

.flex-direction {
  flex-direction: row;
}

.div1 {
  display: flex;
  border-right: 1px solid black;
}

h {
  color: #90bd49;
  font-size: 30px;
}

p {
  color: #333333;
  font-size: 16px;
}

.div2 {
  display: flex;
  background-color: #fff;
  /* max-width: 50%; */
  padding: 1%;
  background-color: #e3e3e3;
}

span {
  font-size: 16px;
  text-align: left;
}

@media only screen and (min-width: 0px) and (max-width: 500px) {
  .flex-direction {
    flex-direction: column;
  }
  .div1 {
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid black;
  }
  .div2 {
    max-width: 100%;
  }
  .container {
    margin: 0%;
  }

  

  
Lorem ipsum 
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.