html:
<div class="row"> <div class="col-6 col-sm-12"> Left column. 50% on large screens. 100% on smaller screens. </div> <div class="col-6 col-sm-12 col-right"> Right column. 50% on large screens. 100% on smaller screens. Has different background for visual difference. </div> </div>
css:
.row { display: flex; flex-wrap: wrap; } .col-6 { flex: 0 0 50%; background-color: #eee; } .col-right { background-color: #dde; } @media (max-width: 576px) { .col-sm-12 { flex-basis: 100%; } }