Use parent div size for bootstrap responsive grid system

I just managed to make the grid system inside a modal act responsive to the modal's breakpoints in Bootstrap 4 with scss. Since the modal's max-width is responsive itself on some breakpoints, we need to generate new css on those breakpoints for that specific modal size (sm, md, lg, xl) which just overrules the Bootstrap's css media queries

Just copy/paste everything into a separate scss file, activate it and you are good to go

// This is a stripped version of the original "make-grid-columns" mixin from Bootstrap
@mixin make-modal-grid-columns($breakpoints) {
    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);
        @include media-breakpoint-up($breakpoint, $breakpoints) {
            @for $i from 1 through $grid-columns {
                .col#{$infix}-#{$i} {
                    @include make-col($i, $grid-columns);
                }
            }
        }
    }
}

$breakpoint-sm: 576px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

.modal {
    // Overrules all .col css inside .modal-sm to a single col
    .modal-sm {
        @include make-modal-grid-columns((
            xs: 0
        ));
    }

    // modal-md (no specific class is also modal-md)
    @include make-modal-grid-columns((
        sm: $breakpoint-sm
    ));

    .modal-lg {
         @include make-modal-grid-columns((
             md: $breakpoint-lg
         ));
     }

    .modal-xl {
        @include make-modal-grid-columns((
            md: $breakpoint-lg,
            lg: $breakpoint-xl
        ));
    }
}

FYI: it generates 350 lines of code

As @makshh mentionned in the comment, it does not seem to be possible to do this right now. The only way I found is from another stack overflow question by @tsdexter:

$(document).ready(function(){
  $('.somecontainer').on('resize',function(){
    if ($('.somecontainer').width() < 640) {
        $('.somecontainer').addClass('m');
    } else {
        $('.somecontainer').removeClass('m');
    }
  });
});