Footer.js

const Footer = () => (
  <Container>
    <Content>
      <Row>
        <Column mobile="12" tablet="3" desktop="3">
          <Logo>JOGA</Logo>
        </Column>
        <Column mobile="12" tablet="6" desktop="6">
          <Row>
            <Column mobile="12" tablet="4" desktop="4">
              Contato
            </Column>
            <Column mobile="12" tablet="4" desktop="4">
              Blog
            </Column>
            <Column mobile="12" tablet="4" desktop="4">
              Termos de Uso
            </Column>
          </Row>
        </Column>
        <Column mobile="12" tablet="3" desktop="3">
          <Row>
            <Column mobile="12" tablet="12" desktop="12">
              Siga o Joga no
            </Column>
          </Row>
          <Row>
            <Column mobile="4" tablet="4" desktop="4">
              I
            </Column>
            <Column mobile="4" tablet="4" desktop="4">
              Y
            </Column>
            <Column mobile="4" tablet="4" desktop="4">
              F
            </Column>
          </Row>
        </Column>
      </Row>
    </Content>
  </Container>
);

Grid.js

import styled from 'styled-components';

export const Container = styled.div`
  width: 100%;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;

  &:before,
  &:after {
    content: '';
    display: table;
  }

  &:after {
    clear: both;
  }
`;

export const Row = styled.div`
  width: 100%;
  height: auto;

  &:before,
  &:after {
    content: '';
    display: table;
  }

  &:after {
    clear: both;
  }
`;

function getWidthGrid(value) {
  if (!value) return;

  const width = (value / 12) * 100;
  return `width: ${width}%`;
}

export const Column = styled.div`
  float: left;
  padding: 0.25rem;
  min-height: 1px;
  box-sizing: border-box;

  @media only screen and (max-width: 768px) {
    ${({ mobile }) => mobile && getWidthGrid(mobile)}
  }

  @media only screen and (min-width: 768px) {
    ${({ tablet }) => tablet && getWidthGrid(tablet)}
  }

  @media only screen and (min-width: 1000px) {
    ${({ desktop }) => desktop && getWidthGrid(desktop)}
  }
`;