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

<div class="row clearfix">
  <div class="column">
    <!-- Your Content -->
  </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

.row {
  @extend %clearfix;
}

aekaplan

.button,
a.button,
button,
input[type="submit"],
input[type="button"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;