images of different width and height fitted together in a responsive div - responsive-design

Question

Newbie here, please help :)
I want to have a fully responsive div with images as arranged in snippet.jpg.The problem is that I cannot get the layout to work both in desired position as well as responsiveness.
the image files are located here
https://drive.google.com/folderview?id=0Bz3gVhyJDHHvTE84T2dwSVZKaXc&usp=sharing
The following is the HTML and CSS which I have done
<div class=" container-fluid portfolio-image">
<div class="inner_container1" >
<div class="row ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="img-responsive " src="images/winter1.png" alt=""/>
</div>
</div>
</div>
<div class="inner_container2" >
<div class="row ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="img-responsive " src="images/Woman2.png" alt=""/>
</div>
</div>
</div>
<div class="inner_container3">
<div class="row ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="img-responsive " src="images/adult2.png" alt=""/>
</div>
</div>
<div style="clear:both"></div>
<div class="inner_container4" >
<div class="row ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="img-responsive " src="images/txt background.png" width="400" alt=""/>
<p> Portfolio</p>
</div>
</div>
</div>
</div>
<div class="inner_container5">
<div class="row ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="img-responsive " src="images/feet2.png" alt=""/>
</div>
</div>
</div>
</div>
CSS
.portfolio-image{
margin:0 !important;
padding:0!important;
}
.inner_container1 {
float:left;
}
.inner_container2 {
float:right;
}
.inner_container3 {
float:left;
}
.inner_container4 {
float:right;
paddin:0px;
margin:0 auto;
}
.inner_container5 {
float:right;
}
.no-pad{
pading:0;
margin:0;
}

Answer 1

<style>
.fulldiv {
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.float-none {
float:none;
}
.float-inherit {
float: inherit;
}
</style>
<div class="fulldiv">
<img src="~/images/winter1.png" class="img-responsive left" style="width:65%;"/>
<img src="~/images/woman2.png" class="img-responsive right" style="width:35%;" />
<img src="~/images/adult2.png" class="img-responsive left" style="width:35%;" />
<img src="~/images/portfolio.png" class="img-responsive float-none" style="width:30%;" />
<img src="~/images/feet2.png" class="img-responsive float-none" style="width:65%;" />
</div>