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.