jQuery UI Resizable affects bootstrap grid columns system

Question

I found a good topic from jsfiddle, and the title is jQuery UI Resizable affects only on column classes. It explains how to change the bootstrap grid system so that it can be resized

Here the original link

https://codepen.io/delagics/pen/PWxjMN

I try to modify the original code only to migrate it from bootstrap 3.3.7 to 4.0.0 a

Here is my code:

https://jsfiddle.net/denisc/ty06zwo8/21/

The problem is that the latest version of bootstrap 4 CSS has : -ms-flex: 0 0 25%; flex: 0 0 25%; on the grid system, but the old version doesn't have flex: it only has width:

On my jsfiddle link above, it works, but when I try the code in localhost including all bootstrap compiled CSS and JS bundle, the flex is still showing from _grid-framework.scss

I don't want to change anything in the bootstrap code. Please help me modify the original jQuery code above ^_^ I don't understand any of the whole jQuery code how to make it happen with my case just to migrate it into bootstrap latest version.

$(function () {
var resizableEl = $(".resizable").not(":last-child"),
columns = 12,
fullWidth = resizableEl.parent().width(),
columnWidth = fullWidth / columns,
totalCol, // this is filled by start event handler
updateClass = function (el, col) {
el.css("width", ""); // remove width, our class already has it
el.removeClass(function (index, className) {
return (className.match(/(^|\s)col-\S+/g) || []).join(" ");
}).addClass("col-sm-" + col);
};
// jQuery UI Resizable
resizableEl.resizable({
handles: "e",
start: function (event, ui) {
var target = ui.element,
next = target.next(),
targetCol = Math.round(target.width() / columnWidth),
nextCol = Math.round(next.width() / columnWidth);
// set totalColumns globally
totalCol = targetCol + nextCol;
target.resizable("option", "minWidth", columnWidth);
target.resizable("option", "maxWidth", (totalCol - 1) * columnWidth);
},
resize: function (event, ui) {
var target = ui.element,
next = target.next(),
targetColumnCount = Math.round(target.width() / columnWidth),
nextColumnCount = Math.round(next.width() / columnWidth),
targetSet = totalCol - nextColumnCount,
nextSet = totalCol - targetColumnCount;
// Just showing class names inside headings
target.find("h3").text("col-sm-" + targetSet);
next.find("h3").text("col-sm-" + nextSet);
updateClass(target, targetSet);
updateClass(next, nextSet);
}
});
});