simple layout responsive

HTML

<div class="container">
    <div class="row">
        <div class="col1"></div>
    </div>
    <div class="row">
        <div class="col2"></div>
        <div class="col2"></div>
    </div>
    <div class="row">
        <div class="col3"></div>
        <div class="col3"></div>
        <div class="col3"></div>
    </div>  
</div>

CSS

* {
    box-sizing: border-box;
}
.container {
    width:100%;
    max-width:600px;
    border:2px solid black;
    margin: 0 auto;
    padding:10px;
}
.row {
    height:100px; /*set height*/
    border:2px solid blue;
    width:100%;
    margin-bottom:10px;
    padding:10px;
}
.col1 {
    border:2px solid red;
    width:100%;
    height:100%;    
}
.col2 {
    border:2px solid green;
    width:49%;
    float:left;
    height:100%;
    margin-right:2%;    
}
.col2:last-child {margin-right:0;  }
.col3 {
    border:2px solid brown;
    width:32%;
    float:left;
    height:100%;
    margin-right:2%;    
}
.col3:last-child {margin-right:0;  }