Columns live inside Rows

Remember when you are creating your layout that all columns must be contained inside a row and that you must add the col class to your inner divs to make them into columns

col s12
col s6
col s6

Offsets

To offset, simply add offset-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.

This div is 12-columns wide on all screen sizes
6-columns (offset-by-6)

More Responsive

we only defined the size for small screens using "col s12". This is fine if we want a fixed layout since the rules propogate upwards. By just saying s12, we are essentially saying "col s12 m12 l12". But by explicitly defining the size we can make our website more responsive.

s12
s12 m4
s12 m4
s12 m4
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12 m6 l3

Menu's and few food photos can be added on the left & right column .