Normalize use of Responsive Breakpoints/Emulators

[davidjgonzalez]

Expected Behaviour

See #277 and #279 - There is a slight (but confusing) disconnect with how the AEM Grid CSS (names), Responsive Breakpoints (node names/labels) and Emulators are setup in WKND project.

We should either have 2 breakpoints (for simplicity):

• Small
• Default (anything > Small)

Or we should support the usual 3 (Phone/Tablet/Desktop) but ensure they align with Page Editor emulator breakpoints so it is clear what's being edited when.

Actual Behaviour

Currently, the only way to edit the Tablet breakpoint is to select Desktop emulator and resize the browser, not to mention the iPad Retina is considered "Smaller Screen" which stores its data under "phone" (which is a bit confusing as well, since a ipad is not a phone)

This maybe require an audit/adjustment of existing cq:responsive/ node definitions on the ui.content.sample, as there are phone/table/default in the code base (which i think might be holdovers from a prior breakpoint configuration scheme)