Compatibility:
WebSite X5 Pro
You can use the commands in the Responsive settings window to make each page on the website adapt to the various devices it may be displayed on, indicating how the page must change at each active breakpoint.
If you are working with the Pro edition, when you have defined the order in which the Objects are to be displayed and decided which ones to hide in certain viewports, in this window you can decide whether and where to add Line Breaks.
A Line Break moves an Object or an Object Block onto a new line of the layout Grid when the page is displayed at resolutions that are lower than the selected one. In fact, by setting a Line Break you force the layout to "start over on a new line".
Click on the 
Line break button to start adding necessary Line Breaks. You will see a broken gray line in all the places in the Page layout where you can add a Line Break. Click on one of these lines to add your Line Break: the broken line will turn red. Click a second time on the Line Break you already set to remove it. Click on the 
Line Break button a second time to confirm your settings and end this procedure.
Image 1. Adding line breaks to the Page layout
The example below helps clarify the Line Break mechanism: Line Breaks have been set before Object 3 and after Object 7 at the Desktop breakpoint:
Image 2. Layout for the Desktop breakpoint
As you can see, the Line Break symbol reflects the display order. Have a look at the Line Break symbol before Object 7: Object 7 will be placed above the block created by Objects 8, 9 and 10 because the display order for these objects is from right to left.
Given the display order, the line breaks that have been added and the fact that object 2 has been hidden, the resulting page layout at the next breakpoint after the desktop will be the following:
Image 3. Layout for the breakpoint following the Desktop viewport
You can see that Object 2, which was hidden, is no longer visible, but the display order of the other Objects doesn't change. The Line Break forces Objects 3 and 4 onto row 2, leaving Object 1 to occupy the whole width of row 1. If the Line Break hadn't been added. Objects 1, 3 and 4 would all have remained side by side on row 1, each occupying a third of it.
Similarly, the second Line Break separates the block of Objects 8, 9 and 10 and places them on new rows, under Object 7.
Note that, when an Object covers more than one column, its proportion in width is maintained in the next breakpoint. In Image 1, for example, Object 5 occupies 3 of the 4 available columns at the desktop breakpoint: this is equivalent to 75% of the row. This proportion is maintained at the next breakpoint (image 3), even though the other Objects that are aligned along the width don't have the same layout as before.