Today, when Google adheres to the "mobile first" principle, and the majority of the web audience uses mobile devices to surf (like smartphones or tablets), а site developers need a way to control how the website's content displays on various mobile devices.
N1ED offers the way to do this, among everything else. You can simulate devices with different screen resolution to preview content. Moreover: you can continue editing content in any mobile device mode. Effectively, this is not a preview, but full-functional editing of responsive content on your website.
As you see from pictures, the ruler above offers various widths corresponding to different devices. These are called breakpoints. When you activate a breakpoint, your editor continues working in the selected device mode.
By default, N1ED developers pre-configured the most popular resolutions, but if you need your own display size, you can configure this using the preview parameter.
Bootstrap support
Bootstrap CSS framework offers additional tools to edit responsive content. For complete support for Bootstrap 4 and Bootstrap 3 you can use the Bootstrap Editor add-on in CKEditor/TinyMCE and get Bootstrap breakpoints support (not to mention the Bootstrap layout editor as well as support for new Bootstrap widgets). This plugin works with the aid of N1ED and always installs in parallel with it.
In the Bootstrap structure editing mode you can edit all containers, rows and columns and specify size of each breakpoint individually: exactly as Bootstrap supposes you to do. Also, you can hide or show any Bootstrap block depending on the given breakpoint.