(html/css) Position of image not correct on desktop

So I was trying to optimize my website for different ratios. However I can not position the image on the left side and the text on the right side on desktop.

This is my content [html] (text and image):

.wrapper{
    width: 100%;
}

.wrapper img-info{
    width: 100%;
}

.img-info h2{
    width: 100%;
    padding: 30px 30px 20px;
    font-size: 50px;
    color: #111;
    line-height: 44px;
}

.img-info p{
    padding: 0px 30px 20px;
    font-size: 16px;
    color: #111;
    line-height: 24px;
}

.startseite-img{
    width: 100%;
}

@media only screen and (min-width:768px){
    
    .wrapper{
        width: 600px;
        margin: 0 auto;
    }
    
    .img-info h2{
        width: 100%;
        padding: 20px 0px 0px;
    }
    
    .img-info p{
        padding: 20px 0px 0px;
    }
    
    .startseite-img{
        padding-top: 30px;
    }
}

@media only screen and (min-width:1000px){
    
    .wrapper{
        width: 1000px;
    }
    
    .wrapper img-info{
        width: 50%;
        float: right;
    }
    
    .img-info h2{
        padding: 20px 0px 0px 30px;
    }
    
    .img-info p{
        padding: 20px 0px 0px 30px;
    }
    
     .startseite-img{
        padding-top: 0px;
        width: 50%;
        float: left;
    }
}

<div class="wrapper">
  <article class="img-info">
    <h2>Hi!</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, sed diam voluptua.</p>
  </article>
  <img class="startseite-img" src="https://via.placeholder.com/150">
</div>

To give you an idea of my problem here's a screenshot: false positioning with the img When you still have any questions about my problem, you can visit the website kevnkkm.de to see the full html/css source code or just comment on this question!

Solution

Wrap your article and image in a common container, and set it up like this, using Flexbox (in your largest media query):

  .article-container {
    display: flex;
    flex-direction: row;
  }
  .article-container article {
    flex: 1 0 75%;
    order: 2;
  }
  
  .article-container .startseite-img {
    flex: 1 0 25%;
    order: 1;
  }

In Flexbox, you can reorder the elements without touching the HTML code. That's what order: 1 does.

flex: 1 0 75% does this:

the first number tells how the element should grow.
the second number tells how the element should shrink.
the third value is the basis which will be used when calculating the actual grow and shrink values.

Comprehensive info with examples on Flexbox here.

Working example:

expand the snippet to full page to see the code working

.wrapper {
  width: 100%;
}

.wrapper img-info {
  width: 100%;
}

.img-info h2 {
  width: 100%;
  padding: 30px 30px 20px;
  font-size: 50px;
  color: #111;
  line-height: 44px;
}

.img-info p {
  padding: 0px 30px 20px;
  font-size: 16px;
  color: #111;
  line-height: 24px;
}

.startseite-img {
  width: 100%;
}

@media only screen and (min-width:768px) {
  .wrapper {
    width: 600px;
    margin: 0 auto;
  }
  .img-info h2 {
    width: 100%;
    padding: 20px 0px 0px;
  }
  .img-info p {
    padding: 20px 0px 0px;
  }
  .startseite-img {
    padding-top: 30px;
  }
}

@media only screen and (min-width:1000px) {
  .wrapper {
    width: 1000px;
  }
  .article-container {
    display: flex;
    flex-direction: row;
  }
  .article-container article {
    flex: 1 0 75%;
    order: 2;
  }
  
  .article-container .startseite-img {
    flex: 1 0 25%;
    order: 1;
  }
  .wrapper img-info {
    width: 50%;
    float: right;
  }
  .img-info h2 {
    padding: 20px 0px 0px 30px;
  }
  .img-info p {
    padding: 20px 0px 0px 30px;
  }
}

<div class="wrapper">
  <div class="article-container">
    <article class="img-info">
      <h2>Hi!</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
        et dolore magna aliquyam erat, sed diam voluptua.</p>
    </article>
    <img class="startseite-img" src="16.9%20Placeholder.png">
  </div>
</div>