.six
a = all
d = desktop
t = tablet
h = handheld
m = mobile
c = cell
words = desktop and tablet
All grid classes can be overriden by more specific screen sizes. "a-6 t-4" will be 6 columns on all screen sizes except tablets, in which it would convert to 4 columns.
Wordnumbers apply to desktop and tablet sizes. Ex: .six, .four, .five
Try resizing the screen to see how the grid containers adapt
.six
.six
.four
.four
.four
.d-2
.t-3
.m-4
.c-6
.d-2
.t-3
.m-4
.c-6
.d-2
.t-3
.m-4
.c-12
.d-2
.t-3
.m-8
.c-4
.d-2
.t-6
.m-4
.c-4
.d-2
.t-6
.m-12
.c-4
.a-4
.t-12
.a-4
.t-6
.a-4
.t-6
.a-20
.m-60
.a-20
.m-40
.a-20
.m-20
.c-40
.a-20
.m-60
.c-60
.a-20
.m-20
.c-12
.twenty
.eighty
.six
.a-6
.a-6
.a-4
.a-4
.a-4
.six
.a-4
.a-4
.a-4
.a-12
1
.t-position-2
.m-position-3
2
.t-position-3
.m-position-1
3
.t-position-1
.m-position-2
.a-4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nam explicabo ad iusto tempora ab?.a-4
Lorem ipsum dolor sit amet..a-4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, facere ipsa sed pariatur sapiente debitis facilis delectus animi! Pariatur, ad ipsam sequi laboriosam quibusdam! Velit, voluptate, repudiandae, atque, natus deserunt non placeat aliquam quisquam qui quas delectus sunt esse ipsum..a-4
Lorem ipsum dolor..a-4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, consequatur ipsum explicabo..a-4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, a tempore assumenda cumque dignissimos suscipit harum consectetur illum?.a-4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nam explicabo ad iusto tempora ab?.a-4
Lorem ipsum dolor sit amet..a-4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, facere ipsa sed pariatur sapiente debitis facilis delectus animi! Pariatur, ad ipsam sequi laboriosam quibusdam! Velit, voluptate, repudiandae, atque, natus deserunt non placeat aliquam quisquam qui quas delectus sunt esse ipsum..a-4
Lorem ipsum dolor..a-4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, consequatur ipsum explicabo..a-4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, a tempore assumenda cumque dignissimos suscipit harum consectetur illum?html inside of pre tags will be visible as is if a .show-html class is added to the pre tags.
This content did not have character entities.
Also, video from youtube or vimeo automatically becomes responsive through jquery.