aekaplan

<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/grid.css">

aekaplan

/* Small screens (default) */
html { font-size: 100%; }

/* Medium screens (640px) */
@media (min-width: 40rem) { 
  html { font-size: 112%; }
}

/* Large screens (1024px) */
@media (min-width: 64rem) { 

aekaplan

@media (min-width: 40rem) {
  .column {
    float: left;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .column.full { width: 100%; }
  .column.two-thirds { width: 66.7%; }
  .column.half { width: 50%; }

aekaplan

<div class="container">
  <div class="column">
    <!-- Your Content -->
  </div>
</div>

aekaplan

<div class="container">
  <div class="row clearfix">
    <div class="column half flow-opposite">
      <!-- Your Content -->
    </div>
    <div class="column half">
      <!-- Your Content -->
    </div>
  </div>
</div>

aekaplan

@media (min-width: 40rem) {
  .column.flow-opposite { float: right; }
}

aekaplan

<div class="container">
  <div class="row clearfix">
    <div class="column half">
      <!-- Your Content -->
    </div>
    <div class="column half">
      <!-- Your Content -->
    </div>
  </div>
</div>

aekaplan

%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after { 
   clear: both;
  }
}

aekaplan

<div class="row">
  <div class="column">
    <!-- Your Content -->
  </div>
</div>

aekaplan

<div class="row clearfix">
  <div class="column">
    <!-- Your Content -->
  </div>
</div>