Responsive design 不同宽度和高度的图像组合在一个灵敏的div中

这里是新手，请帮忙：） 我希望有一个完全响应的div，图像排列在snippet.jpg中。问题是我无法使布局在所需位置和响应性上都工作

图像文件位于此处

下面是我所做的HTML和CSS

    <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>

富尔迪夫先生{
宽度：100%；
}
.左{
浮动：左；
}
.对{
浮动：对；
}
1.无浮动{
浮动：无；
}
.浮动继承{
浮动：继承；
}

    .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;  
    }

<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>