Issue with responsive design.

When I switch to the mobile view, the elements on the screen are just squeezed. (I am using the grapesjs-blocks-basic plugin) In the screenshots below, a have a column with 2 cells. I expect it to be converted to rows in the mobile view <br/> <hr/> <br> The code for the deviceManager is:

deviceManager: {
      devices: [{
          name: 'Desktop',
          width: '', // default size
        }, {
          name: 'Mobile',
          width: '400px', // this value will be used on canvas width
          widthMedia: '480px', // this value will be used in CSS @media
      }]
},