JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container clearfix">
   <div class="column one">1</div>
   <div class="column two">2</div>
   <div class="column three">3</div>
   <div class="column four">4</div>
   <div class="column five">5</div>  
   <div class="column six">6</div> 
   <div class="column seven">7</div>
   <div class="column eight">8</div>
</div>

CSS

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both
}
.container {
    max-width: 960px;
    padding: 2%;
    box-sizing:border-box;
    border:1px solid blue;
}
.container .column:nth-child(odd) {
    width: 30%;
    float: left;
}
.container .column:nth-child(even) {
    width: 68%;
    float: right;
}
.column {
    font-family: sans-serif;
    color: red;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid red;
    margin-bottom:2%;
}
.one {
    height: 150px
}
.two {
    height: 250px
}
.three {
    height: 250px;
    clear:left;
}
.four {
    height: 450px
}
.five {
    height: 450px;
}
.six {
    height: 350px
}
.seven {
    height: 250px
}
.eight {
    height: 200px;
}
@media only screen and (max-width:678px) { 
	.container .column:nth-child(odd),
	.container .column:nth-child(even) {
	    width: 100%;
	    float: none;
	}
}