Subject of the issue

Resizing window causes grid items to be positioned to the right. And order changes when resizing.

Your environment

• Version 5.1
• Chrome Windows 10

Steps to reproduce

I have 4 items that are 1 column wide followed by 2 items that are 4 columns wide. With the following settings, and the window set to less than 992px, there are 2 columns but the last 2 items that were in the first row on a large screen (when there were 4 columns) are now stacked in the right column under the first 2 items like so:
1 2
_ 3
_ 4
5
6

var grid = GridStack.init({
    column: 4,
    cellHeight: "140px",
    disableOneColumnMode: true,
    float: false,
    handle: ".tile__heading"
});

setTimeout(function () {
    resizeGrid();
}, 1000);

function resizeGrid() {
    let width = document.body.clientWidth;
    let layout = "moveScale";
    if (width < 576) {
        grid.column(1, layout);
    } else if (width < 992) {
        grid.column(2, layout);
    } else if (width < 1100) {
        grid.column(3, layout);
    } else {
        grid.column(4, layout);
    }
}

window.addEventListener('resize', function () { resizeGrid(); });

Expected behavior

The last 2 items in the first row should flow under the first 2 items like so:
1 2
3 4
5
6

Actual behavior

Instead they flow leaving 2 blank spaces on the left like so:
1 2
_ 3
_ 4
5
6