JavaScript/jQuery ResponsiveBox - items.location
If you need to specify different locations for different screens, pass an array of objects with the same structure to the location field.
HTML
<div data-options="dxItem: {
location: [
{ row: 0, col: 0, colspan: 3, screen: "lg"},
{ row: 0, col: 0, colspan: 2, screen: "xs sm md"}
]
}"> <p>Header</p> </div>See Also
screen
Type:
Default Value: undefined
Before applying the current location settings, the UI component considers the screen's width and applies the location settings only if the width matches the specified size qualifier. There are four size qualifiers in all.
| Size Qualifier | Description |
|---|---|
| xs | Stands for "extra small". Screens with width less than 768 pixels. |
| sm | Stands for "small". Screens with width between 768 and 992 pixels. |
| md | Stands for "medium". Screens with width between 992 and 1200 pixels. |
| lg | Stands for "large". Screens with width more than 1200 pixels. |
The screen property accepts one or several size qualifiers separated by a space. For example, the following settings apply to an element on medium and large screens only.
HTML
<div id="responsiveBoxContainer">
<div data-options="dxItem: {
location: {
screen: "md lg",
row: 0, col: 0
}
}"></div>
</div>See Also
Feedback