Layout Container, Responsive Grid Layouting JS Error from editor.js

I'm attempting to follow the instructions for configuring our pages to realize the responsive grid as the default paragraph system. 

https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/configuring-responsive-layouting.html

Using Geometrixx Media as a reference, when I select Layouting, there is a toggle emulator button which hides/shows the emulator bar, which has buttons for iPhone, iPad and Desktop. Clicking these links sizes the viewport, and allows layout to be set accordingly. This all works fine for Geometrixx Media.

On my page after selecting Layouting, the emulator bar is always present. There is no button to toggle the emulator bar visibility. Clicking on the emulator titles, I see a JS error in the console.

Uncaught TypeError: Cannot read property 'responsive' of undefined

Relating to ...

        /**
         * Applies a device based on the name which has to be part of the page info
         * Or a forced config
         * @param devicename {String}
         * @param [config] {}
         */
        applyDevice: function (devicename, config) {
            var cfg = config || ns.page.info.emulators.groups.responsive[devicename],

My breakpoints appear correct, and are displayed.  I'm using the cq:deviceGroup = /etc/mobile/groups/responsive

        <cq:responsive jcr:primaryType="nt:unstructured">
          <breakpoints jcr:primaryType="nt:unstructured">
            <xs jcr:primaryType="nt:unstructured" title="{String}Mobile (Extra Small)" width="{Decimal}767"/>
            <sm jcr:primaryType="nt:unstructured" title="{String}Tablet (Small)" width="{Decimal}991"/>
            <md jcr:primaryType="nt:unstructured" title="{String}Desktop (Medium)" width="{Decimal}1199"/>
            <!-- <lg jcr:primaryType="nt:unstructured" title="{String}Desktop (Large)" width="{Decimal}991"/> -->
          </breakpoints>
        </cq:responsive>