Configuration cols[]

Specifies the collection of columns for the grid used to position layout elements.

Type: Array

Refer to the Layout Widgets guide to learn how to specify an element's size.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div class="toolbar">
        <p class="selection">Select layout: 
            <a href="#" onclick="setLayout('xs');">Phone</a>,
            <a href="#" onclick="setLayout('sm');">Tablet</a>,
            <a href="#" onclick="setLayout('lg');">Desktop</a>
        </p>
    </div>
    <div class="box" dx-responsive-box="{
        singleColumnScreen: 'xs',
        rows: rowItems,
        cols: colItems,
        screenByWidth: getScreenFactor
    }">
        <div class="header" data-options="dxItem: { 
            location: [{ row: 0, col: 0, colspan: 3, screen: 'lg'}, { row: 0, col: 0, colspan: 2, screen: 'xs sm md'}]}"><p></p></div>
        <div class="content" data-options="dxItem: { 
            location: [{ row: 1, col: 1, screen: 'lg' }, { row: 1, col: 0, colspan: 2, screen: 'xs sm md' }]}"><p></p></div>
        <div class="left-side-bar" data-options="dxItem: { 
            location: [ { row: 1, col: 0, screen: 'lg' }, { row: 2, col: 0, screen: 'xs sm md' }]}"><p></p></div>
        <div class="right-side-bar" data-options="dxItem: { 
            location: [ { row: 1, col: 2, screen: 'lg' }, { row: 2, col: 1, screen: 'xs sm md' }]}"><p></p></div>  
        <div class="footer" data-options="dxItem: {
                location: [ { row: 2, col: 0, colspan: 3, screen: 'lg' }, { row: 3, col: 0, colspan: 2, screen: 'xs sm md' }]}"><p></p></div>
    </div>
</div>
setLayout = function (layout) {
    currentLayout = layout;
    $(".box").dxResponsiveBox("instance").repaint();
};
currentLayout = "xs";
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.rowItems = [
            { ratio: 1 },
            { ratio: 2 },
            { ratio: 2, screen: 'sm md' },
            { ratio: 1 }
    ];
    $scope.colItems = [
            { ratio: 1 },
            { ratio: 2, screen: 'lg' },
            { ratio: 1 }
    ];
    $scope.getScreenFactor = function (width) {
        return currentLayout;
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
.toolbar{
    position: absolute;
    top:0;
    left: 0;
    width: 90%;
    height: 25px;
    padding: 5%;
}
.box {
    height: 100%;
}
.header{ 
    background-color: #f39e6c; 
    text-align: center;
}
.content{ 
    background-color: #f5e5a6; 
}
.left-side-bar{ 
    background-color: #94d7c7; 
}
.right-side-bar{ 
    background-color: #77c7e7; 
}
.footer{ 
    background-color: #7b9bcf; 
}
.selection{
    margin: auto;
    font-size: 16px;
    color: #808080;
    background-color: white;
    padding: 10px;
    border: solid 2px #c36e3c;
}
<div class="toolbar">
    <p class="selection">Select layout: 
        <a href="#" onclick="setLayout('xs');">Phone</a>,
        <a href="#" onclick="setLayout('sm');">Tablet</a>,
        <a href="#" onclick="setLayout('lg');">Desktop</a>
    </p>
</div>
<div class="box" data-bind="dxResponsiveBox: {
    singleColumnScreen: 'xs',
    rows: rowItems,
    cols: colItems,
    screenByWidth: getScreenFactor
}">
    <div class="header" data-options="dxItem: { 
        location: [{ row: 0, col: 0, colspan: 3, screen: 'lg'}, { row: 0, col: 0, colspan: 2, screen: 'xs sm md'}]}"><p></p></div>
    <div class="content" data-options="dxItem: { 
        location: [{ row: 1, col: 1, screen: 'lg' }, { row: 1, col: 0, colspan: 2, screen: 'xs sm md' }]}"><p></p></div>
    <div class="left-side-bar" data-options="dxItem: { 
        location: [ { row: 1, col: 0, screen: 'lg' }, { row: 2, col: 0, screen: 'xs sm md' }]}"><p></p></div>
    <div class="right-side-bar" data-options="dxItem: { 
        location: [ { row: 1, col: 2, screen: 'lg' }, { row: 2, col: 1, screen: 'xs sm md' }]}"><p></p></div>  
    <div class="footer" data-options="dxItem: {
            location: [ { row: 2, col: 0, colspan: 3, screen: 'lg' }, { row: 3, col: 0, colspan: 2, screen: 'xs sm md' }]}"><p></p></div>
</div>
setLayout = function (layout) {
    currentLayout = layout;
    $(".box").dxResponsiveBox("instance").repaint();
};
currentLayout = "xs";
var myViewModel = {
    rowItems: [
            { ratio: 1 },
            { ratio: 2 },
            { ratio: 2, screen: 'sm md' },
            { ratio: 1 }
    ],
    colItems: [
            { ratio: 1 },
            { ratio: 2, screen: 'lg' },
            { ratio: 1 }
    ],
    getScreenFactor: function (width) {
        return currentLayout;
    }
}
ko.applyBindings(myViewModel);
body {
    text-align: center;
}
.toolbar{
    position: absolute;
    top:0;
    left: 0;
    width: 90%;
    height: 25px;
    padding: 5%;
}
.box {
    height: 100%;
}
.header{ 
    background-color: #f39e6c; 
    text-align: center;
}
.content{ 
    background-color: #f5e5a6; 
}
.left-side-bar{ 
    background-color: #94d7c7; 
}
.right-side-bar{ 
    background-color: #77c7e7; 
}
.footer{ 
    background-color: #7b9bcf; 
}
.selection{
    margin: auto;
    font-size: 16px;
    color: #808080;
    background-color: white;
    padding: 10px;
    border: solid 2px #c36e3c;
}
<div class="toolbar">
    <p class="selection">Select layout: 
        <a href="#" onclick="setLayout('xs');">Phone</a>,
        <a href="#" onclick="setLayout('sm');">Tablet</a>,
        <a href="#" onclick="setLayout('lg');">Desktop</a>
    </p>
</div>
<div class="box" id="myResponsiveBox">
    <div class="header" data-options="dxItem: { 
        location: [{ row: 0, col: 0, colspan: 3, screen: 'lg'}, { row: 0, col: 0, colspan: 2, screen: 'xs sm md'}]}"><p></p></div>
    <div class="content" data-options="dxItem: { 
        location: [{ row: 1, col: 1, screen: 'lg' }, { row: 1, col: 0, colspan: 2, screen: 'xs sm md' }]}"><p></p></div>
    <div class="left-side-bar" data-options="dxItem: { 
        location: [ { row: 1, col: 0, screen: 'lg' }, { row: 2, col: 0, screen: 'xs sm md' }]}"><p></p></div>
    <div class="right-side-bar" data-options="dxItem: { 
        location: [ { row: 1, col: 2, screen: 'lg' }, { row: 2, col: 1, screen: 'xs sm md' }]}"><p></p></div>  
    <div class="footer" data-options="dxItem: {
        location: [ { row: 2, col: 0, colspan: 3, screen: 'lg' }, { row: 3, col: 0, colspan: 2, screen: 'xs sm md' }]}"><p></p></div>
</div>
setLayout = function (layout) {
    currentLayout = layout;
    $("#myResponsiveBox").dxResponsiveBox("instance").repaint();
};
currentLayout = "xs";
$("#myResponsiveBox").dxResponsiveBox({
    singleColumnScreen: "xs",
    rows: [
            { ratio: 1 },
            { ratio: 2 },
            { ratio: 2, screen: 'sm md' },
            { ratio: 1 }
    ],
    cols: [
            { ratio: 1 },
            { ratio: 2, screen: 'lg' },
            { ratio: 1 }
    ],
    screenByWidth: function (width) {
        return currentLayout;
    }
});
body {
    text-align: center;
}
.toolbar{
    position: absolute;
    top:0;
    left: 0;
    width: 90%;
    height: 25px;
    padding: 5%;
}
.box {
    height: 100%;
}
.header{ 
    background-color: #f39e6c; 
    text-align: center;
}
.content{ 
    background-color: #f5e5a6; 
}
.left-side-bar{ 
    background-color: #94d7c7; 
}
.right-side-bar{ 
    background-color: #77c7e7; 
}
.footer{ 
    background-color: #7b9bcf; 
}
.selection{
    margin: auto;
    font-size: 16px;
    color: #808080;
    background-color: white;
    padding: 10px;
    border: solid 2px #c36e3c;
}

baseSize

The base width of the column.

Type: Number
Default Value: 0

ratio

The column width ratio.

Type: Number
Default Value: 1

screen

The screen factor or factors by which the current column is used. If this field is not defined, the column is used by all screen factors.

Type: String
Default Value: undefined