Created by: rodrigosiqueira-dev
Row columns are not working correctly with responsive breakpoints, for exemple:
< div class="row row-cols-1 row-cols-md-2" > < div class="col" >Some content< /div> < div class="col-12" >Some content< /div> < div class="col" >Some content< /div> < div class="col" >Some content< /div> < /div >
doesn't matter the breakpoint this code will always show 1 column in small devices and 2 columns in largers. The col-12 div doesn't get the whole size above md breakpoint as expected.
I made some fix in a custom mixin make-col by adding !important and just works fine now as the code below:
// Fix make-col mixin to work correctly with responsive row-cols breakpoints @mixin make-col($size, $columns: $grid-columns) { flex: 0 0 percentage($size / $columns) !important; // Add a max-widthto ensure content within each column does not blow out // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // do not appear to require this. max-width: percentage($size / $columns) !important; }