How do I make this image reponsive for mobile?

Question

I have an image that I want at the right of my page and a paragraph that I want on the left. Also, how do I make it so that when the browser is cromped the text stacks on top of the image and the image goes below so the text does not appear in front of the image.

code:

HTML

 <div id="animal-div">
            <div class="animal">
              <div>
                <p id="harryinformation">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<br> when an unknown printer took a galley of type and scrambled it to make a<br> type specimen book. It has survived not only five centuries, but also the leap into<br> electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s<br> with the release of Letraset sheets containing Lorem Ipsum passages, and more recently<br> with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
              <div id="harryimg">
                <img src="../Zoo/images/download.jpeg">
              </div>
            </div>
          </div>

CSS:

#harryinformation {
    color: red;
}

#animal-div img {
    border: red solid 1px;
    width: 50%;
    border-radius: 50%;
}

Answer 1

If it is a text for a picture is worth a look at the css property - float:

An image on the left, text on the right

Answer 2

This can be done with flexbox.

The interesting part is flex-direction: column vs row.

I added to your css the following:

.animal{
  display: flex;
  flex-direction: column;
}
.animal > div{
  flex: 1;
}
@media only screen and (min-width: 600px) {
  .animal{
    flex-direction: row;
  }
}

I also changed the width and height of the image, see it in action here: https://jsfiddle.net/o801te7j/

Answer 3

I think the easiest way is Bootstrap Grid and use different col on different screens like sm, md, lg. You can find information about it here: https://getbootstrap.com/docs/4.6/layout/grid/ Hopefully it will help you.