Desalinhamento de cards no tamanho de resolução menor do boostrap 4

Front-end
#1

Boas amigos. Estou com o seguinte problema em relação ao alinhamento vertical das minhas cards, abaixo deixo a imagem e o código para melhor exemplificar. Tem como poderem me ajudar? Fiz algo de errado? De salientar que está dentro de um container… Ainda estou na fase de aprendizagem… Obrigado

08
Screenshot 2019-09-01 02.06.08.png499×657 11.3 KB 

    <div class="row">
                    <div class="col-sm-5 mr-3 mb-3 justify-content-sm-center">
                        <div class="card border-0" id="content-a" style="height:
                            12rem;">
                            <div class="card-body text-center">
                                <h4 class="card-title font-weight-bold">Jogos da
                                    Multiplicação</h4>
                                <a href="multip_game.html" class="card-link
                                    text-center" style="font-size: 15pt;
                                    text-decoration: underline;">&rarr;Entra e
                                    joga!&larr;</a>


                            </div>

                        </div>


                    </div>

                    <div class="col-sm-5 mb-3 ">
                        <div class="card border-0 bg-warning" id="content-b"
                            style="height: 12rem;">
                            <div class="card-body text-center">
                                <h4 class="card-title text-center font-weight-bold">Jogo
                                    da Divisão</h4>
                                <a href="divi_game.html" class="card-link
                                    text-center" style="font-size:
                                    15pt;text-decoration: underline;">&rarr;Entra e
                                    joga!&larr;</a>


                            </div>

                        </div>
                    </div>

                </div>

    <div class="row">

                    <div class="col-sm-5 mr-3 mb-3">
                        <div class="card border-0" id="content-c" style="height:
                            12rem;">
                            <div class="card-body text-center">
                                <h4 class="card-title font-weight-bold">Jogo do Par
                                    ou Impar <span class="special-word">?</span><span
                                        class="special-word3">?</span></h4>
                                <a href="par_impar_game.html" class="card-link"
                                    style="font-size: 15pt;text-decoration:
                                    underline;">&rarr;Entra e joga!&larr;</a>


                            </div>

                        </div>

                    </div>

                    <div class="col-sm-5 mb-5 mb-3 ">
                        <div class="card border-0" id="content-d" style="height:
                            12rem;">
                            <div class="card-body text-center">
                                <h4 class="card-title font-weight-bold">Jogo do
                                    Primo ou não primo<span class="special-word">?</span><span
                                        class="special-word3">?</span></h4>
                                <a href="prim_game.html" class="card-link"
                                    style="font-size: 15pt;text-decoration:
                                    underline;">&rarr;Entra e joga!&larr;</a>

                            </div>

                        </div>
                    </div>
                </div>
#2

Um dos divs tem a classe mr-3, outros nao. Confere o resto.

#3

Obrigado… Já consegui resolver o meu problema, acabei introduzindo todos os cards numa unica row e para cada card criei uma col-sm-6, fazendo que quando a linha ja tivesse dois elementos a preencher 12 colunas automaticamente as restantes cards passassem para baixo. Acabou funcionando