Responsivel layout with image

Question

I have an area with a title, text , list and image. I need to leave the image next to the text area, as in the figure below:

However, when decreasing the screen resolution I need the image to be right after the title, that is, enter the title and the text. And not at the end of the texts.

HTML

<div class="content">
  <div class="text_content">
    <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h2>

    <div class="texto_Um">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat nam
      numquam provident repellat natus magni nemo at, porro unde non, totam,
      dolorem voluptates expedita? Ut aspernatur quibusdam molestiae cupiditate
      nihil.
    </div>

    <div class="texto_Dois">
      Alorem voluptates expedita? Ut aspernatur quibusdam molestiae cupiditate
      nihil.
    </div>

    <div class="lista_section">
      <ul>
        <li>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi
        </li>
        <li>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi sed
          quod
        </li>
        <li>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi sed
          quod
        </li>
        <li>Lorem ipsum dolor sit</li>
        <li>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi sed
          quod at laudantium quisquam voluptatem illo odio aperiam illum enim
          sit at laudantium quisquam voluptatem illo odio aperiam illum enim sit
        </li>
      </ul>
    </div>
  </div>

  <div class="imagem_section">
    <img
      src="https://mcdn.wallpapersafari.com/medium/80/94/3kEq8V.jpeg"
      alt="teste"
    />
  </div>
</div>

CSS

.content{
    display: flex;   
    flex-wrap: wrap;
    /* background-color: #EFF0E8; */
}

.text_content {
    margin: 30px 0 0 30px;
    flex:1;
}

.texto_Dois, .lista_section{
    margin-top: 10px;
}

img{
    width: 400px;
}

Answer 1

You can use the @media Rules css for responsiveness. And basically use display flex to align the image with the text whenever the device screen is greater than 500px (or as you want to use).

.content{
    display: flex;   
    flex-wrap: wrap;
    /* background-color: #EFF0E8; */
}

.text_content {
    margin: 30px 0 0 30px;
    flex:1;
}

.texto_Dois, .lista_section{
    margin-top: 10px;
}

img{
    width: 400px;
}

@media screen and (min-width: 500px) {
  .content {
    display: flex;
  }
}

<div class="content">
  <div class="text_content">
    <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h2>

    <div class="texto_Um">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat nam
      numquam provident repellat natus magni nemo at, porro unde non, totam,
      dolorem voluptates expedita? Ut aspernatur quibusdam molestiae cupiditate
      nihil.
    </div>

    <div class="texto_Dois">
      Alorem voluptates expedita? Ut aspernatur quibusdam molestiae cupiditate
      nihil.
    </div>

    <div class="lista_section">
      <ul>
        <li>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi
        </li>
        <li>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi sed
          quod
        </li>
        <li>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi sed
          quod
        </li>
        <li>Lorem ipsum dolor sit</li>
        <li>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi sed
          quod at laudantium quisquam voluptatem illo odio aperiam illum enim
          sit at laudantium quisquam voluptatem illo odio aperiam illum enim sit
        </li>
      </ul>
    </div>
  </div>

  <div class="imagem_section">
    <img
      src="https://mcdn.wallpapersafari.com/medium/80/94/3kEq8V.jpeg"
      alt="teste"
    />
  </div>
</div>