A Pen by kenzik.

A-Pen-by-kenzik.markdown

A Pen by kenzik

A Pen by kenzik on CodePen.

License.

index.html

<div class="row display">
  <div class="small-10 small-push-2 columns">10</div>
  <div class="small-2 small-pull-10 columns">2, last</div>
</div>
<div class="row display">
  <div class="large-9 large-push-3 columns">9</div>
  <div class="large-3 large-pull-9 columns">3, last</div>
</div>
<div class="row display">
  <div class="large-8 large-push-4 columns">8</div>
  <div class="large-4 large-pull-8 columns">4, last</div>
</div>
<div class="row display">
  <div class="medium-7 small-5 small-push-7 medium-push-5 columns">7</div>
  <div class="medium-5 small-7 small-pull-5 medium-pull-7 columns">5, last</div>
</div>
<div class="row display">
  <div class="medium-6 medium-push-6 columns">6</div>
  <div class="medium-6 medium-pull-6 columns">6, last</div>
</div>

style.css

.row.display {
  background: #eeeeee;
  font-size: 11px;
  margin-bottom: 10px;
  line-height: 2rem;
  border: solid 1px #c6c6c6;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.row.display .columns:nth-child(2), .row.display .columns.small-centered, .row.display .columns.large-centered {
  background: #e1e1e1;
}