Alinhamento Bootstrap

Bom dia, Estou usando Bootstrap 4 em um exercício, e não estou conseguindo alinhar as divs, conforme a imagem https://ibb.co/cnHEPT

Quero centralizar a div LARANJA com a AZUL e a AZUL com a PRETA.

Estou tentando assim:

  <div id="container-login" className="d-flex">
                <Container className="align-self-center">
                    <div className="col-lg-5 col-xl-5 col-sm-5 border border-warning">
                        {/*Div laranja*/}
                        <h1>Laranja</h1>
                    </div>
                    <div className="row justify-content-center mt-3">
                        <div id="form-login" className="col-lg-5 col-xl-4 col-sm-5 mr-5 border border-info">
                            {/*Div Azul*/}
                            <h1>Azul</h1>
                        </div>
                        <div className="col-lg-4 col-xl-4 col-sm-6 border border-dark">
                            {/*Div PRETA*/}
                            <h1>Preta</h1>
                        </div>
                    </div>
                </Container>
            </div >

me traz esse resultado https://ibb.co/mivnB8

Porem quando acesso de um celular por exemplo eu gostaria de deixar centralizado, mas não estou conseguindo: https://ibb.co/kHPm4T

Alguem tem uma sugestão de comer fazer esse Layout de uma forma que quando acessado no celular ele traga um resultado como esse: https://ibb.co/bQTXB8

Onde as Divs fiquem centralizadas...