Responsive Layout allows you to set different layouts per breakpoint, meaning your store will have a different layout depending on which device the user is using to access it.
What has changed
Before the Responsive Layout, there was no generic way to build different layouts for your store.
The only solution was to individually set the various layouts in each component, such as the Store Header's two possible interfaces: header-layout.desktop e header-layout.mobile.
This solution, in addition to being impractical, is not fully effective, since not all components are enabled to have various interfaces such as the Store Header.
Main advantages
Building different layouts can now be done independently from each block's individual configuration. The Responsive Layout facilitates this process, granting stores the dynamism to give users different browsing experiences depending on which device they use.
At its fullest and with a visual scope in mind, the Responsive Layout is so powerful and widespread that it allows you to build different stores in a single one.
What you need to do
To understand more about the Responsive Layout and learn how to use it, access its related documentation.