diff --git a/demo/column.html b/demo/column.html
index 189a0400a..8de31e93b 100644
--- a/demo/column.html
+++ b/demo/column.html
@@ -18,16 +18,19 @@
 <body>
   <div class="container-fluid">
     <h1>setColumn() grid demo</h1>
-    <a class="btn btn-primary" id="add-widget" href="#">Add Widget</a>
-    <a class="btn btn-primary" id="1column" href="#">1 Column</a>
-    <a class="btn btn-primary" id="2column" href="#">2 Column</a>
-    <a class="btn btn-primary" id="3column" href="#">3 Column</a>
-    <a class="btn btn-primary" id="4column" href="#">4 Column</a>
-    <a class="btn btn-primary" id="6column" href="#">6 Column</a>
-    <a class="btn btn-primary" id="8column" href="#">8 Column</a>
-    <a class="btn btn-primary" id="10column" href="#">10 Column</a>
-    <a class="btn btn-primary" id="12column" href="#">12 Column</a>
-    <br><br>
+    <div><span>Number of Columns:</span> <span id="column-text">12</span></div>
+    <div>
+      <a class="btn btn-primary" id="add-widget" href="#">Add Widget</a>
+      <a class="btn btn-primary" id="1column" href="#">1 Column</a>
+      <a class="btn btn-primary" id="2column" href="#">2 Column</a>
+      <a class="btn btn-primary" id="3column" href="#">3 Column</a>
+      <a class="btn btn-primary" id="4column" href="#">4 Column</a>
+      <a class="btn btn-primary" id="6column" href="#">6 Column</a>
+      <a class="btn btn-primary" id="8column" href="#">8 Column</a>
+      <a class="btn btn-primary" id="10column" href="#">10 Column</a>
+      <a class="btn btn-primary" id="12column" href="#">12 Column</a>
+    </div>
+    <br>
     <div class="grid-stack"></div>
   </div>
 
@@ -36,6 +39,7 @@ <h1>setColumn() grid demo</h1>
       var $grid = $('.grid-stack');
       $grid.gridstack({float: true});
       grid = $grid.data('gridstack');
+      var $text = $('#column-text');
 
       $grid.on('added', function(e, items) {log(' added ', items)});
       $grid.on('removed', function(e, items) {log(' removed ', items)});
@@ -74,15 +78,14 @@ <h1>setColumn() grid demo</h1>
         grid.addWidget($('<div><div class="grid-stack-item-content">' + count++ + (n.text ? n.text : '') + '</div></div>'), n);
       });
 
-      $('#1column').click(function() { grid.setColumn(1); });
-      $('#2column').click(function() { grid.setColumn(2); });
-      $('#3column').click(function() { grid.setColumn(3); });
-      $('#4column').click(function() { grid.setColumn(4); });
-      $('#6column').click(function() { grid.setColumn(6); });
-      $('#6column').click(function() { grid.setColumn(6); });
-      $('#8column').click(function() { grid.setColumn(8); });
-      $('#10column').click(function() { grid.setColumn(10); });
-      $('#12column').click(function() { grid.setColumn(12); });
+      $('#1column').click(function() { grid.setColumn(1); $text.text(1);});
+      $('#2column').click(function() { grid.setColumn(2); $text.text(2);});
+      $('#3column').click(function() { grid.setColumn(3); $text.text(3);});
+      $('#4column').click(function() { grid.setColumn(4); $text.text(4);});
+      $('#6column').click(function() { grid.setColumn(6); $text.text(6);});
+      $('#8column').click(function() { grid.setColumn(8); $text.text(8);});
+      $('#10column').click(function() { grid.setColumn(10); $text.text(10);});
+      $('#12column').click(function() { grid.setColumn(12); $text.text(12);});
     });
   </script>
 </body>
diff --git a/demo/responsive.html b/demo/responsive.html
index 523b569ee..295e8bc93 100644
--- a/demo/responsive.html
+++ b/demo/responsive.html
@@ -1,9 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Responsive grid demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
@@ -15,85 +12,59 @@
   <script src="../src/gridstack.jQueryUI.js"></script>
 </head>
 <body>
-  <div class="device-xs visible-xs"></div>
-  <div class="device-sm visible-sm"></div>
-  <div class="device-md visible-md"></div>
-  <div class="device-lg visible-lg"></div>
-  <div class="device-xl visible-xl"></div>
-  <div class="container-fluid">
+  <div>
     <h1>Responsive grid demo</h1>
-
     <div>
-      <span>Number of Columns:</span> <span id="grid-size"></span>
+      <span>Number of Columns:</span> <span id="column-text"></span>
     </div>
-
     <br/>
-
     <div class="grid-stack">
     </div>
   </div>
 
-
   <script type="text/javascript">
     $(function () {
-      // thanks to http://stackoverflow.com/a/22885503
-      var waitForFinalEvent=function(){var b={};return function(c,d,a){a||(a="I am a banana!");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
-      var fullDateString = new Date();
-      function isBreakpoint(alias) {
-        return $('.device-' + alias).is(':visible');
-      }
-
-      $('.grid-stack').gridstack();
+      var grid = $('.grid-stack').gridstack({
+        disableOneColumnMode: true, // will manually do 1 column
+        float: true }).data('gridstack');
+      var $text = $('#column-text');
+      
       function resizeGrid() {
-        var grid = $('.grid-stack').data('gridstack');
-        if (isBreakpoint('xs')) {
-          $('#grid-size').text('One column mode');
-        } else if (isBreakpoint('sm')) {
+        var width = document.body.clientWidth;
+        if (width < 700) {
+          grid.setColumn(1);
+          $text.text(1);
+        } else if (width < 850) {
           grid.setColumn(3);
-          $('#grid-size').text(3);
-        } else if (isBreakpoint('md')) {
+          $text.text(3);
+        } else if (width < 950) {
           grid.setColumn(6);
-          $('#grid-size').text(6);
-        } else if (isBreakpoint('lg')) {
+          $text.text(6);
+        } else {
           grid.setColumn(12);
-          $('#grid-size').text(12);
+          $text.text(12);
         }
       };
       $(window).resize(function () {
-        waitForFinalEvent(function() {
-          resizeGrid();
-        }, 300, fullDateString.getTime());
+        resizeGrid();
       });
-
-      new function () {
-        this.serializedData = [
-          {x: 0, y: 0, width: 4, height: 2},
-          {x: 3, y: 1, width: 4, height: 2},
-          {x: 4, y: 1, width: 4, height: 1},
-          {x: 2, y: 3, width: 8, height: 1},
-          {x: 0, y: 4, width: 4, height: 1},
-          {x: 0, y: 3, width: 4, height: 1},
-          {x: 2, y: 4, width: 4, height: 1},
-          {x: 2, y: 5, width: 4, height: 1},
-          {x: 0, y: 6, width: 12, height: 1}
-        ];
-
-        this.grid = $('.grid-stack').data('gridstack');
-
-        this.loadGrid = function () {
-          this.grid.removeAll();
-          var items = GridStackUI.Utils.sort(this.serializedData);
-          this.grid.batchUpdate();
-          items.forEach(function (node, i) {
-            this.grid.addWidget($('<div><div class="grid-stack-item-content">' + i + '</div></div>'), node);
-          }.bind(this));
-          this.grid.commit();
-          return false;
-        }.bind(this);
-
-        this.loadGrid();
+      $(document).ready(function() {
         resizeGrid();
-      };
+      });
+      
+      var items = [
+        {x: 0, y: 0, width: 2, height: 2},
+        {x: 2, y: 0, width: 2, height: 1},
+        {x: 5, y: 0, width: 1, height: 1},
+        {x: 1, y: 3, width: 4, height: 1},
+        {x: 5, y: 2, width: 2, height: 1},
+        {x: 0, y: 4, width: 12, height: 1}
+      ];
+      grid.batchUpdate();
+      items.forEach(function (node, index) {
+        grid.addWidget($('<div><div class="grid-stack-item-content">' + index + '</div></div>'), node);
+      });
+      grid.commit();
     });
   </script>
 </body>
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 42b8ee5f0..57cdd74db 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -29,7 +29,8 @@ Change log
 ## v0.6.0-dev (upcoming changes)
 
 - one column mode (<768px by default) now simply calls `setColumn(1)` and remembers prev columns (so we can restore). This gives
-us full resize/re-order of items capabilities rathern than a locked CSS only layout (see prev rev changes).
+us full resize/re-order of items capabilities rathern than a locked CSS only layout (see prev rev changes). [#1120](https://github.com/gridstack/gridstack.js/pull/1120)
+- fixed responsive.html demo [#1121](https://github.com/gridstack/gridstack.js/pull/1121)
 
 ## v0.6.0 (2019-12-24)
 
