Boostrap Grid Test in QML

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "Bootstrap test : " + ["xs", "sm", "md", "lg"][thresholdIndex(this)]

    function colSize(object, colSizes) {
        return object.parent.width*colSpan(object, colSizes)/12;
    }

    function colSpan(object, colSizes) {
        var thresholds = ["xs", "sm", "md", "lg"]
        var index = thresholdIndex(object.Window.window);
        for (var i = index; i >= 0; --i) {
            var span = colSizes[thresholds[i]];
            if (span)
                return span;
        }
        return 12;
    }

    function thresholdIndex(window) {
        var windowWidth = window.width;
        if (windowWidth < 768)
            return 0;
        if (windowWidth < 992)
            return 1;
        if (windowWidth < 1200)
            return 2;
        return 3;
    }

    Flow {
        width: parent.width
        height: parent.height
        Rectangle {
            color: "green"
            height: 60
            width: colSize(this, {sm : 12, md: 6, lg: 4})
        }
        Rectangle {
            color: "yellow"
            height: 60
            width: colSize(this, {sm : 12, md: 6, lg: 4})
        }
        Rectangle {
            color: "red"
            height: 60
            width: colSize(this, {sm : 12, md: 6, lg: 4})
        }
    }
}