I’ve had RSD a few days and played around with it a bit – enough to recognise that I am not going to answer the following 2 questions myself. So if anyone could please help that would be great.
1. I want to put a picture and text next to each other (for PC viewing) but in such a way that when the screen width is narrowed and the picture reaches its minimum width (say 400 px) the text will drop below the picture. How do I do this? In fact – how do I even put these next to each other without just putting them in separate columns?
2. In the ‘Design’ menu under ‘Position’
a. there is a line with ‘Clear’ and 4 boxes – I have played around with these and seen no changes happening. What do they do?
b. similarly for ‘Display’ – I have sort of understood ‘Block’ and ‘In-line Block’ but the rest elude me.
Cheers

Place your image and your paragraph each inside their own column and set them to float left or right depending on needs. Then you can remove the float at the proper break point. You'll have to adjust the width of your paragraph and the column span count to your needs to make sure there's enough room for the elements to actually float. So on a 12 span grid you can have 2 6 span columns one with a p and the other with a img. When the image reaches the 400 min set a break point and remove the floats.

Thanks Eric - I tried that but couldn’t get the text (RHS column) to drop down below the picture (LHS column) no matter what I did with the floats.
However, I did discover I could do it by changing the RHS column to 7 spans which forced it below the LHS column (using a 12 span page).

I would divide a column into 6 spans and place the image and text in each independently and in smaller screen I change it to 12 spans to get stacking feature.

Take a look at this project. two separate columns.

New version. One column.

Thanks Eric – without your samples I would not have got it.
My take on it is:
One column
The float is attached to the element. To fit 2 elements side by side into one column their percentage widths together must be no more than 100% and both elements need to be floated. Unfloating them (at whatever chosen breakpoint) creates the wrap. (Other magic can be worked with the float and clear functions but is beyond me at the moment!)
Two columns
The float is attached to the column. The elements can remain unfloated within the column - the float on the column(s) does the work. Unfloating just one column will create the wrap but it is cleaner if both are unfloated. No floating or unfloating of elements within the column is required at any time.
How's that sound?

That's pretty much it. Either approach will work. Which one you use really doesn't matter but one may give you better options depending on where your layout goes.