Posicionamento de divs

[juniormatrix 2]

Olá!

 

Estou desenvolvendo um website com Bootstrap 4 e deparei-me com um problema.

 

Tenho a seguinte sequencia de div's que tem essa formação para ser exibida em dimensões maiores (computadores e notebooks):

 

agora, quando for exibido em telas menores, como smartphones, gostaria que ficasse desta forma:

 

Já tentei e não estou conseguindo obter o resultado desejado. Se alguém puder me ajudar, fico grato.

 

[tetsuo 0]

Olá!
No bs 5 você pode definir a ordem das colunas, de acordo com os breakpoints, veja:
https://getbootstrap.com/docs/5.3/layout/columns/#order-classes

Agora pesquise se na v4 já exisita essa feture

[juniormatrix 2]

Olá

 

Primeiramente grato pela dica.

 

Fiz desta forma e funcionou:

 

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 order-md-2">
            <div class="card card-body bg-info">B</div>
        </div>
        <div class="col-6 col-md-3 order-md-1">
            <div class="card card-body">A</div>
        </div>
        
        <div class="col-6 col-md-3 order-md-3">
            <div class="card card-body">C</div>
        </div>
        
    </div>
</div>

Se tá certo ou não, eu não sei, mas funcionou!