Trouble Achieving Responsive Layout with Gridstack Version 10.x

Question

I'm currently working on implementing a grid layout using Gridstack version 10.x in my project. I'm trying to make the layout responsive, where the number of columns and the size of grid items adjust based on different screen widths.

I've tried configuring the columnWidth and breakpoints options as suggested in the documentation, but I'm having trouble getting the desired responsive behavior.

Here's a simplified version of my code:

<div class="container grid-stack-item-content bg-primary" style="height: 600px">
        <div class="row grid-stack">
            <div class="grid-stack-item bg-info p-4 col-6" gs-y="1" gs-w="6">
                <div class="grid-stack-item-content">Item 1</div>
            </div>
            <div class="grid-stack-item bg-warning p-4 col-3" gs-y="2" gs-w="3">
                <div class="grid-stack-item-content">Item 2 wider</div>
            </div>
            <div class="grid-stack-item bg-danger p-4 col-3" gs-y="2" gs-w="3">
                <div class="grid-stack-item-content">Item 3 wider</div>
            </div>
            <div class="grid-stack-item bg-info p-4 col-6" gs-y="1" gs-w="6">
                <div class="grid-stack-item-content">Item 1</div>
            </div>
            <div class="grid-stack-item bg-warning p-4 col-3" gs-y="2" gs-w="3">
                <div class="grid-stack-item-content">Item 2 wider</div>
            </div>
            <div class="grid-stack-item bg-danger p-4 col-3" gs-y="2" gs-w="3">
                <div class="grid-stack-item-content">Item 3 wider</div>
            </div>
        </div>
    </div>

     GridStack.initAll({
            width: 12,
            column: 12,
            cellHeight: "auto", // = 48px
            // sizeToContent: true,
            margin: "10px",
            resizable: false,
            // cellHeight: "auto", // see other possible values (best to do in here)
            // cellHeightThrottle: 100,
            columnOpts: {
                breakpointForWindow: true, // test window vs grid size
                breakpoints: [{
                    w: 400,
                    c: 1,
                }, {
                    w: 600,
                    c: 6,
                }, {
                    w: 850,
                    c: 6,
                }, {
                    w: 1100,
                    c: 8,
                }, ],
            },
            draggable: {
                handle: ".grid-stack-item-content",
                x: true,
                y: true,
            },
        });
    </script>