CodePen

HTML

            
              <ul class="columns">
  <li class="column--block">1</li>
  <li class="column--block">2</li>
  <li class="column--block">3</li>
  <li class="column--block">4</li>
  <li class="column--block">5</li>
  <li class="column--block">6</li>
</ul>
            
          
!

CSS

            
              .columns {
  list-style: none;
  width: 275px;
}
.column--block {
  background-color: #ff9900;
  clear: left;
  color: #fff;
  float: left;
  margin-bottom: 1em;
  margin-right: 25px;
  padding: 20px 0;
  text-align: center;
  width: 125px;
}

.column--block:nth-child(4),
.column--block:nth-child(4) ~ .column--block {
  clear: both;
  display:inline-block;
  float: none;
  margin-right: 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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