Fix Position Of Images At Left, Center And Right On Page But Also Responsive

If I want one image on left hand side and another one is on right hand side simultaneously in same row such that it is responsive in every device. Then what should I do? As you can

Solution 1:

HTML

<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>
<div class="wrapper col-md-6">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

CSS

.wrapper { float: left; clear: left; display: table; table-layout: fixed; }
img.img-responsive { display: table-cell; max-width: 100%; }

.col-md-6 { width: 25%; float: left;}
.col-md-3 { width: 25%; float: right;}

JSFiddle