Making your site responsive

You can change most settings related to layout on a per device bases. This will make your site look great on desktops, tablets and mobile phones. Initially all layouts will take over the desktop layout. So you start creating your website for desktop, and then overwrite anything specific for tablets or phones.

First you create your layout for desktop.Then you can overwrite specfic properties by selecting a device from the device list.

Any styles you change will only be applied for the selected screen size.
Styles that are changable on a device bases include:  font-properties, background color, background images, alignment, position, margin, padding, border and display.
Things that are not included are: images, galleries and any other widgets, actions and hyperlinks.

To show different widgets for different devices, you can add two widgets and hide one or the other based on the device.
For instance, i have two images, but i want to show the bottom one on phone.
I select the top one and hide it under "display photo".
The hidden image will still show up under the content view but will be hidden in the editor when you deselect it.

The last tool for creating responsive sites is working with grids. These can reflow their columns to better match the limited width for portrait orientations.
To lean more about this topic, check out this grid article.

Note: Hiding widgets for showing them based on device should be used with moderation, since The widget will still be present on the page even though it's hidden, making the page heavier to load and render.