Basic

In this example we are going to create a simple menu with buttons that on a large screen displays the buttons in one row then on tablets each buttons takes half the space of the screen the on mobile each buttons stacks full width.

ResponsiveLayout responsiveLayout = new ResponsiveLayout();
        ResponsiveRow row = responsiveLayout.addRow();

        Button deleteButton = new Button("",FontAwesome.TRASH);
        deleteButton.addStyleName(ValoTheme.BUTTON_DANGER);
        deleteButton.setSizeFull();

        Button commentButton = new Button("",FontAwesome.COMMENT);
        commentButton.addStyleName(ValoTheme.BUTTON_PRIMARY);
        commentButton.setSizeFull();

        Button editButton = new Button("",FontAwesome.EDIT);
        editButton.addStyleName(ValoTheme.BUTTON_FRIENDLY);
        editButton.setSizeFull();


        row.addColumn().withDisplayRules(12,6,4,4).withComponent(deleteButton);
        row.addColumn().withDisplayRules(12,6,4,4).withComponent(commentButton);
        row.addColumn().withDisplayRules(12,6,4,4).withComponent(editButton);

This is using the fluent API for Responsive Layout but the principle is the same.

---

##Here is the layout that we created.

Computer

Tablet

Phone