Place text left to an image underneath an image

Issue

Right now I’m building my first own portfolio website.
But I have the following issue:
I have text left to an image.
But now I want that the text goes underneath the image when I scale down the website.

This is my code:

.myself {
  display: grid;
  margin: 100px 70px 0px 70px;
  grid-template-columns: 1fr 1fr;
}

.location {
  display: flex;
  align-items: center;
  width: 30vw;
  margin-right: auto;
}

.location>img {
  width: 35%;
  height: auto;
}

.location h2 {
  display: inline-block;
  padding: 0px 0px 0px 20px;
  margin-right: auto;
}

.age {
  display: flex;
  align-items: center;
  width: 30vw;
  margin-left: auto;
}

.age>img {
  width: 45%;
  height: auto;
}

.age h2 {
  display: inline-block;
  padding: 0px 20px 0px 0px;
  text-align: right;
  margin-left: auto;
}
<div class="me">
  <div class="myself">
    <div class="location">
      <img src="./img/location.svg" alt="location icon">
      <h2 class="bold">Based in <span class="purple"> Switzerland</span></h2>
    </div>

    <div class="age">
      <h2 class="bold">I am <br><span class="purple">18 years</span> old</h2>
      <img src="./img/person.svg" alt="person icon">
    </div>
  </div>

Here is the picture of the actual site:

enter image description here

And with a media query the text "I am 18 years old" should go under this "person icon".
The solution which I use for the text left, works.

How do I do that?

Solution

I fixed the problem. I changed the order from the class .age and put first the image and then the text. After that I changed the flexbox order with "order: X". This looks like this:

.age {
  display: flex;
  align-items: center;
  width: auto;
  margin-left: auto;
}

.age img {
  order: 2; // I had to add this attribute
  width: 35%;
  height: auto;
}

.age h2 {
  order: 1; // I had to add this attribute
  display: inline-block;
  padding: 0px 20px 0px 0px;
  text-align: right;
  margin-left: auto;;
}

After that I made a media query with @media only screen and (max-width: 880px).
In this media query I modified the .age class like this:

  .age {
    display: inline-block;
    vertical-align: top;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .age h2 {
    display: block;
    padding: 0px 0px 0px 0px;
    text-align: center;
  }

Answered By – JamesJPG

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published