.fifty {
  display: flex;
  flex-wrap: wrap;

  > * {
    flex: 1 1 auto;
    margin: $gutter 0;
  }

  @media screen and (min-width: 768px) {
    flex-wrap: nowrap;

    > * {
      margin: 0 $gutter;
    }

    &.fifty-reversed {
      > * {
        &:first-of-type { order: 2;}
        &:last-of-type { order: 0;}
      }
    }

  }
}