J'essaie donc de créer un modèle dans lequel un div est une image et l'autre est un texte avec un arrière-plan. Maintenant, je souhaite rendre ce modèle réactif afin que le texte se trouve sous l'image à une largeur de px spécifique. En parcourant stackoverflow, j'ai vu d'innombrables messages disant que vous devriez utiliser Flexbox. J'ai essayé mais je n'y suis pas parvenu.

Donc, sur ordinateur, cela devrait ressembler à ceci : https://i.stack.imgur.com/HDehv.jpg Sur smartphone, cela devrait sauter ici https://i.stack.imgur.com/D4VOh. .jpg

J'ai besoin de marges des deux côtés, au moins sur la version de bureau. Maintenant, mon problème est que mes images n'ont pas de limite sur mon site et deviennent trop volumineuses et le passage automatique aux lignes se produit (pour autant que je sache).

Mon code est ici : 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>

J'ai essayé de limiter la largeur et la hauteur du div et de l'image, mais soit cela n'a pas aidé, soit je casserais le tout encore plus. Si quelqu'un peut m'aider à voir mon erreur, je lui en serais très reconnaissant.