Sobrepor cinco colunas no Bootstrap 4

Recentemente precisei sobrepor colunas utilizando Bootstrap 4.

No meu caso, foram 5 colunas (mais especificamente cards) que precisavam intercalar a ordem de suas camadas.

Para resolver, defini a estrutura básica das colunas no html usando a classe col padrão, e no CSS dei margens horizontais negativas para que elas “subissem” em cima das vizinhas.
Utilizando nth-child(odd) e nth-child(even) para alternar as ordens das camadas (z-index) em conjunto com as margens verticais, para ficarem desalinhadas obtive o resultado desejado.

Você pode conferir aqui como foi feito:

O resultado é 100% compatível com o bootstrap e mantém toda a responsividade, que no meu caso ficou assim:

Marc Sendra martorell

Então, resumindo. Não existe um jeito nativo no Bootstrap 4 para sobrepor as colunas, mas trabalhando com um CSS customizado simples e usando as margens negativas, é possível chegar em resultados bem legais, e ainda responsivos.

Ficou alguma dúvida? Precisa de alguma ajuda? Deixe um comentário!