.fifty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

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

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

    > * {
      margin: 0 $gutter 0 0;
    }

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

  }
}