JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
    <article class="row">
        <section class="column-60 right"><img src="http://i57.tinypic.com/21ah6c4.jpg"></section>
        <section class="column-40 left"><img src="http://i61.tinypic.com/13z8j2g.png"></section>
        <section class="column-40 left"><img src="http://i61.tinypic.com/13z8j2g.png"></section>
    </article>
        <article class="row">
        <section class="column-60 left"><img src="http://i58.tinypic.com/2hn73av.png"></section>
        <section class="column-40 right"><img src="http://i58.tinypic.com/20fawqs.png"></section>
    </article>
    <article class="row">
        <section class="column-40 left"><img src="http://i58.tinypic.com/20fawqs.png"></section>
        <section class="column-60 right"><img src="http://i58.tinypic.com/2hn73av.png"></section>
    </article>
    <article class="row">
        <section class="column-60 left"><img src="http://i57.tinypic.com/21ah6c4.jpg"></section>
        <section class="column-40 right"><img src="http://i61.tinypic.com/13z8j2g.png"></section>
        <section class="column-40 right"><img src="http://i61.tinypic.com/13z8j2g.png"></section>
    </article>
</section>

CSS

.right { float:right }

.left { float:left }

.container { margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; max-width:1280px; }

.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after { content: " "; display: table; }

.clearfix:after, .container:after, .container-fluid:after, .row:after { clear: both; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

img { display: block; height: auto; max-width: 100%; min-width: 100%; opacity: 1; transition: opacity 0.3s ease 0s; }

 @media (max-width: 479px) {

.column-40, .column-60 { float:none; min-height: 1px; padding-left: 6px; padding-right: 6px; margin-top:12px; height:auto; width:100% }

}
 @media (min-width: 480px) {
     
 .column-60 { width: 62.5% }
 .column-40 { width: 37.5% }
 .column-40, .column-60 { position: relative; min-height: 1px; padding-left: 6px; padding-right: 6px; margin-top:12px; height:auto }
 
}