<div class="main-content column-3-4 push-column-1-4">
  This is my main content and stuff.
</div>

<div class="sidebar column-1-4 pull-column-3-4">
  This is, like, my sidebar
</div>
.main-content {
  background-color: red;
}
.sidebar {
  background-color: green;
}

@media (min-width: 799px) {
  .column-1-4,
  .column-3-4 {
    position: relative;
    float: left;
  }
  .column-1-4 {
    width: 25%;
  }
  .column-3-4 {
    width: 75%;
  }
  .push-column-1-4 {
    left: 25%;
    right: auto;
  }
  .pull-column-3-4 {
    left: auto;
    right: 75%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.