CodePen

HTML

            
              <div class="wrapper">
  <div class="post left"></div>
  <div class="post right"></div>
  <div class="post left"></div>
  <div class="post right"></div>
</div>

<div class="wrapper">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
            
          
!

CSS

            
              * { 
  box-sizing:border-box;
}

.wrapper {
  width:50%;
  margin:10px auto;
  padding:5px;
  overflow:hidden; /* quick clearfix */
  border:1px solid lightgrey;
}

.post {
  height:100px;
  width:50%;
  background:NavajoWhite;
  float:left;
  margin-bottom:5px;
}

.left {
  background:red;
}

.right {
  background:green;
}

.child {
  height:100px;
  width:50%;
  background:NavajoWhite;
  margin-bottom:5px;
}

.child:nth-of-type(even) {
  float:left;
  background:blue;
}

.child:nth-of-type(odd) {
  float:right;
  background:orange
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................