.HolyGrail {
  display: flex;
  min-height: 100%;
  flex-direction: column;

  @include ie-only {
    // `height: 100%` is needed for IE because of the `min-height` flexbox bug.
    height: 100%;
  }
}

.HolyGrail-body {
  display: flex;
  flex-direction: column;
  padding: 1.5em;
}

.HolyGrail-content {
  margin: 1.5em 0;
}

.HolyGrail-nav {
  order: -1;
}

.HolyGrail-nav, .HolyGrail-ads {
  padding: 1em;
  border-radius: 3px;
  background: hsla(31, 15%, 50%, 0.1);
}

@include breakpoint("large") {
  .HolyGrail-body {
    // `flex-shrink: 0` and `flex-basis: auto` are need to work around
    // Flexbox issues in IE 10-11.
    flex: 1 0 auto;

    flex-direction: row;
  }
  .HolyGrail-content {
    flex: 1;
    padding: 0 1.5em;
    margin: 0;
  }
  .HolyGrail-nav, .HolyGrail-ads {
    flex: 0 0 12em;
  }
}

.HolyGrail {
  display: flex;
  min-height: 100%;
  flex-direction: column;

  @include ie-only {
    // `height: 100%` is needed for IE because of the `min-height` flexbox bug.
    height: 100%;
  }
}

.HolyGrail-body {
  display: flex;
  // `flex-shrink: 0` and `flex-basis: auto` are need to work around
  // Flexbox issues in IE 10-11.
  flex: 1 0 auto;
  flex-direction: column;
  padding: 1.5em;
}

.HolyGrail-content {
  margin: 1.5em 0;
}

.HolyGrail-nav {
  order: -1;
}

.HolyGrail-nav, .HolyGrail-ads {
  padding: 1em;
  border-radius: 3px;
  background: hsla(31, 15%, 50%, 0.1);
}

@include breakpoint("large") {
  .HolyGrail-body {
    flex-direction: row;
  }
  .HolyGrail-content {
    flex: 1;
    padding: 0 1.5em;
    margin: 0;
  }
  .HolyGrail-nav, .HolyGrail-ads {
    flex: 0 0 12em;
  }
}

Make sure the holy grail layout works as a sticky footer in all browsers.
Make sure the holy grail layout works as a sticky footer in all browsers.
