Overview - ASP.NET Mvc Responsive Box Demo

$(() => { $('#responsive-box').dxResponsiveBox({ rows: [ { ratio: 1 }, { ratio: 2 }, { ratio: 1 }, ], cols: [ { ratio: 1 }, { ratio: 2, screen: 'lg' }, { ratio: 1 }, ], singleColumnScreen: 'sm', screenByWidth(width) { return (width < 700) ? 'sm' : 'lg'; }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <script src="js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="page"> <div id="responsive-box"> <div class="header" data-options="dxItem: { location: [{ row: 0, col: 0, colspan: 3, screen: 'lg' }, { row: 0, col: 0, colspan: 2, screen: 'sm' }] }" > <p>Header</p> </div> <div class="content" data-options="dxItem: { location: [{ row: 1, col: 1, screen: 'lg' }, { row: 1, col: 0, colspan: 2, screen: 'sm' }] }" > <p>Content</p> </div> <div class="left-side-bar" data-options="dxItem: { location: [{ row: 1, col: 0, screen: 'lg' }, { row: 2, col: 0, screen: 'sm' }] }" > <p>Left Bar</p> </div> <div class="right-side-bar" data-options="dxItem: { location: [{ row: 1, col: 2, screen: 'lg' }, { row: 2, col: 1, screen: 'sm' }] }" > <p>Right Bar</p> </div> <div class="footer" data-options="dxItem: { location: [{ row: 2, col: 0, colspan: 3, screen: 'lg' }, { row: 3, col: 0, colspan: 2, screen: 'sm' }] }" > <p>Footer</p> </div> </div> </div> </div> </body> </html>

.demo-container, #page { height: 100%; min-height: 300px; } #page .header { background-color: rgba(243, 158, 108, 0.8); text-align: center; } #page .content { background-color: rgba(245, 229, 166, 0.8); } #page .left-side-bar { background-color: rgba(148, 215, 199, 0.8); } #page .right-side-bar { background-color: rgba(119, 199, 231, 0.8); } #page .footer { background-color: rgba(123, 155, 207, 0.8); } .item { height: 100%; } #page p { font-size: 20px; padding-top: 10px; text-align: center; }