Как расположить блоки [закрыт]

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
.container { 
  display: flex; 
  flex-flow: row wrap; 
  width: 100%; 
  max-width: 1000px; 
  margin: 0 auto; 
  padding: 2rem 15px 0; 
} 
 
@media only screen and (min-width: 800px) { 
  .container { 
    display: block; 
  } 
} 
 
.title-holder { 
  flex: 0 0 100%; 
} 
 
.desc-holder {} 
 
.img-holder { 
  max-width: 50%; 
  order: 1; 
} 
 
@media only screen and (min-width: 800px) { 
  .img-holder { 
    float: right; 
  } 
} 
 
.sign-holder { 
  align-self: flex-end; 
  width: 200px; 
  height: 200px; 
  background-color: #eaeaea; 
} 
 
img { 
  width: auto; 
  max-width: 100%; 
  height: auto; 
  max-height: 100%; 
}

<div class="container"> 
  <div class="img-holder"> 
    <img src="https://www.foxrc.com/wp-content/themes/frc/static/images/plate1.png" alt="Plate"> 
  </div> 
  <div class="title-holder"> 
    <h1>Title</h1> 
  </div> 
  <div class="desc-holder"> 
    <p> 
      Dramatically reintermediate B2C metrics after cooperative methods of empowerment. Progressively utilize an expanded array of process improvements before one-to-one growth strategies. 
    </p> 
  </div> 
  <div class="sign-holder"> 
    Sign 
  </div> 
 
</div>

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
.container { 
  display: grid; 
  grid-template-columns: 1fr 50% 1fr; 
  grid-template-areas: "title title title" "desc desc desc" "sign img ."; 
  width: 100%; 
  max-width: 1000px; 
  margin: 0 auto; 
  padding: 2rem 15px 0; 
} 
 
@media only screen and (min-width: 800px) { 
  .container { 
    grid-template-columns: 1fr 1fr; 
    grid-template-areas: "title img" "desc img" "sign img"; 
  } 
} 
 
.title-holder { 
  grid-area: title; 
} 
 
.desc-holder { 
  grid-area: desc; 
} 
 
.img-holder { 
  grid-area: img; 
} 
 
@media only screen and (max-width: 799px) { 
  .img-holder { 
    grid-area: img; 
    height: 300px; 
    text-align: center; 
  } 
} 
 
.sign-holder { 
  grid-area: sign; 
  align-self: end; 
  width: 200px; 
  height: 200px; 
  background-color: #eaeaea; 
} 
 
img { 
  width: auto; 
  max-width: 100%; 
  height: auto; 
  max-height: 100%; 
}

<div class="container"> 
  <div class="title-holder"> 
    <h1>Title</h1> 
  </div> 
  <div class="desc-holder"> 
    <p> 
      Dramatically reintermediate B2C metrics after cooperative methods of empowerment. Progressively utilize an expanded array of process improvements before one-to-one growth strategies. 
    </p> 
  </div> 
  <div class="sign-holder"> 
    Sign 
  </div> 
  <div class="img-holder"> 
    <img src="https://www.foxrc.com/wp-content/themes/frc/static/images/plate1.png" alt="Plate"> 
  </div> 
</div>

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
.container { 
  position: relative; 
  width: 100%; 
  max-width: 1000px; 
  margin: 0 auto; 
  padding: 2rem 15px 0; 
} 
 
.info-holder { 
  width: 100%; 
} 
 
@media only screen and (min-width: 800px) { 
  .info-holder { 
    width: 50%; 
    float: left; 
  } 
} 
 
.img-holder { 
  width: 50%; 
  float: left; 
} 
 
@media only screen and (max-width: 800px) { 
  .img-holder { 
    margin: auto; 
    float: none; 
  } 
} 
 
.sign-holder { 
  width: 200px; 
  height: 200px; 
  background-color: #eaeaea; 
} 
@media only screen and (max-width: 800px) { 
  .sign-holder { 
    position: absolute; 
  bottom: 0; 
  left: 0;} 
}  
 
img { 
  width: auto; 
  max-width: 100%; 
  height: auto; 
  max-height: 100%; 
}

<div class="container"> 
  <div class="info-holder"> 
    <div class="title-holder"> 
      <h1>Title</h1> 
    </div> 
    <div class="desc-holder"> 
      <p> 
        Dramatically reintermediate B2C metrics after cooperative methods of empowerment. Progressively utilize an expanded array of process improvements before one-to-one growth strategies. 
      </p> 
    </div> 
    <div class="sign-holder"> 
      Sign 
    </div> 
  </div> 
  <div class="img-holder"> 
    <img src="https://www.foxrc.com/wp-content/themes/frc/static/images/plate1.png" alt="Plate"> 
  </div> 
</div>