Scenes are like a series of animated slides in a slide show. Layouts are used for presenting the content of a scene so that the sizes, positions, etc., of the content of a scene will look good in different browser sizes.
Create one scene with a stage of 900 px and click the checkbox for horizontal scaling. Insert a text object and a rectangle side-by-side. Select them and in the flexible layout panel click on the left and right pins so that each retains its relative position horizontally. preview it in a browser. Grab the right edge of the browser and drag it to the left. The two items will move closer together, retaining their relative positions. Make the window narrow enough and they will overlap.
Go back to the scene, then create a new layout that is much more narrow - such as 450 pixels. You will notice that one of the elements is now off the stage. Move it back onto the stage and reposition them so that the text is above the rectangle. Now preview them. Now, when you drag the width of the browser window you will see that when you hit the 450 mark the 900 px layout will switch to the 450 px layout. Same scene, but different layouts.