SOURCE

<div class="wrap">
  <div class="s1">1</div>
  <div class="s2">
    <div class="s3">3</div>
    <div class="s4">4</div>
  </div>
</div>

.s1{
  height:100px;
  /* width:300px; */
  border:1px solid red;
  /* float:left */
}
.s2{
  height:100px;
  border:1px solid green;
  width:100%;
  /* margin-left:300px; */
}
.s3{
  height:50px;
  /* background-color:blue */
  border:1px solid black;
}
@media screen and (min-width:700px){
  .s1{
    float:left;
    width:300px
    /* width:100%; */
  }
  .s2{
    /* margin-left:0; */
    margin-left:300px;
  }
}