Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
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!
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