Overriding Push/Pull in Foundation

@timgallant

example of the problem

example of the solution

If you are stuck using older versions of foundation, medium-push/pull will override the default positioning for large-# blocks. To fix this you can use media queries to set them back to normal.

In the example below, small and large screens will stack the divs vertically. Then, medium screens will stack the divs horizontally with their order switched.

<div class="iBox">
  <div class="row" style="margin: 0;">
    <div class="imgWrapper small-12 medium-6 medium-push-6 large-12 columns">
      <h1>hello</h1>
    </div>
    <div class="contentWrapper small-12 medium-6 medium-pull-6 large-12 columns">
      <div class="content">
        <h1>there</h1>
      </div>
    </div>
  </div>
</div>
/*** Desktop ***/ 
@media only screen and (min-width: 64.063em) {
    .iBox .imgWrapper {
      left:0%;
    }
    .iBox .contentWrapper {
      right:0%;
    }
}