Compatibility:
WebSite X5 Evo and Pro
When you are designing a responsive website, it's important to establish a hierarchy of the contents for each Page, so that you can more easily identify the important contents that must remain visible, and also how they are laid out, when the website is being viewed at resolutions that are lower than that of the desktop.
In WebSite X5 the indications on how each page has to change according to the breakpoints that have been set up are given in the Responsive settings window which you can open by selecting the 
button in the toolbar above the layout Grid.
This window shows a Responsive Bar with the list of active breakpoints and a Grid that reflects the Page configuration for the selected breakpoint: the first thing you must do is define the order in which the various Objects appear on the page.
Defining the Object display order means deciding the order in which the objects must be placed on the page when the width of the Browser window is not sufficient to display them in the configuration given for the desktop viewport.
Each object in the Grid has an icon, that indicates its type (Text, Image etc.), and a number, that indicates its position in the display order.
In practice the Objects are automatically ordered by the program, but this default order might not be the one you prefer, so you need to check that the contents will appear in the correct order and make any changes that are necessary.
To start putting your content objects in the correct order, you need to select the desktop viewport and click on the 
Display Order button: the Objects will appear semi-transparent and some will have a red border, which indicates that they can be selected.
#tip - The aim of the object display order is to set out all the Objects in the page so that they can be correctly linearized. The program evaluates the order possibilities each time you put an Object in order and uses a red border to indicate those objects which can follow in the order, without causing discontinuity which would impede a correct linearization of all the objects.
Now you can choose which Object, among those with a red border, you want to display first. When an Object is selected, it becomes opaque and its order number is displayed. All the other objects remain semi-transparent and, if necessary, their number is updated.
The choice of the Objects that can be added to the display order (with a red border) changes each time and depends on which object has just been added and how the objects were added to the page layout table originally.
To better understand this mechanism, take a look at the diagrams below:
Image 1. Initial layout
With this Page configuration, when you start establishing the object Display order, the program colors the borders of the objects in the first row red, because they are the only ones which can be chosen.
If you decide that Object 1 is going to be the first in the list, and you click on it, the situation changes as follows:
Image 2. Click on 1: choose between 2, 3 and 4
As you can see, by clicking on Object 1, you confirm it as first in the order list and the program now tells you (with the red borders) that your second Object can only be the ones reporting the numbers 2, 3 or 4.
The above is only one of the display order possibilities: according to the contents, setting another Object of the first row as first element to be displayed would have been better.
Let's continue with our example: imagine that Objects 1, 2 and 3 are confirmed in their current position. Now the program offers us the choice of adding either Object 4 or Object 5 to the display order.
Image 3. Choice between 4 and 5
At this point, the selection you make here will change your page layout: if you click on Object 4, your choice will create a layout organized in two rows, whereas if you click on Object 5, this will determine a layout organized in two columns.
Image 4. Click on 4: a layout in rows
Image 5. Click on 5: a layout in columns
Sometimes, while you are putting the Objects in order, you may configure a layout in which Object Blocks are created: in Image 5, for example, Objects 1, 2, 3 and 4 create a block, as do Objects 5 and 6. An Object Block behaves as though it were a single object and, so that you know where they are, they are indicated in the table as soon as they are formed.
Image 6.
Image 7.
Images 6 and 7 show how different display order choices create Different Blocks, so determining alternative page layouts.
It's not necessarily true that an Object Block remains such in all the viewports.
Image 8. An Object Block in the Desktop viewport
Image 9. When object 4 is hidden, the block is not recreated in the next viewport
In Image 8, for example, Objects 1, 2 and 3 form a single Block because they are adjacent to Object 4 which occupies space on both rows. As you can see in Image 9, however, if you add a line break between the Block and Object 4 (which is possible with the Pro edition), or if you hide Object 4, Objects 1, 2 and 3 don't have any other Object next to them, and they no longer form a Block in the next viewport.
When an Object Block remains such in all the Viewports (apart from the Smartphone one, where the Page is completely linearized) and there is no way to break it up, it is called an Inseparable Block. This kind of Block is also shown in the Grid, but with a different color.
Image 10. An example of an Inseparable Block
Image 10 shows an example of an Inseparable Block. As you can see, the "flower" layout of the Objects means that a row and column layout isn't possible: this obviously reduces order possibilities, as line breaks can't be added between the Objects involved (this feature is available in the Pro edition) and you can't hide one of the objects without automatically hiding all the others. If an inseparable block does appear, we recommend you try to simplify the layout of the Objects to give yourself more freedom in setting up the display order.
In conclusion, it's not possible to say that one order is better than another: it all depends on the contents you have and the results you want to achieve. When you have ordered your objects, remember to check your work in the offline Preview so you can see how your Pages will appear at the various breakpoints. If the contents appear coherently, it means you have established a functional layout and there shouldn't be any need to change it.