G
GIES

Gogies 3D Grids

bd-1
bd-11
bd-2
bd-10
bd-3
bd-9
bd-4
bd-8
bd-5
bd-7
bd-6
bd-6
bd-7
bd-5
bd-8
bd-4
bd-9
bd-3
bd-10
bd-2
bd-11
bd-1
bd-12

Mobile first 12 columns grids system. columns should be placed inside .row

Grids Devices:


Small Device < 768px
Class prefix: sd-
.sd-1 , .sd-2 , .sd-3 , .sd-4 , .sd-5 , .sd-6 , .sd-7 , .sd-8 , .sd-9 , .sd-10 , .sd-11 , .sd-12
Medium Device < 992px
Class prefix: md-
.md-1 , .md-2 , .md-3 , .md-4 , md-5 , .md-6 , .md-7 , .md-8 , .md-9 , .md-10 , .md-11 , .md-12
big Device < 1200px
Class prefix: bd-
.bd-1 , .bd-2 , bd-3 , .bd-4 , bd-5 , .bd-6 , .bd-7 , .bd-8 , .bd-9 , .bd-10 , .bd-11 , .bd-12
Extra Big Device > 1200px
Class prefix: xbd-
.xbd-1 , .xbd-2 , .xbd-3 , xbd-4 , xbd-5 , .xbd-6 , .xbd-7 , xbd-8 , xbd-9 , .xbd-10 , .xbd-11 , .xbd-12
example :
<div class="row">
<div class="bd-3">.bd-3</div>
<div class="bd-9">.bd-9</div>
<div class="bd-6">.bd-6</div>
<div class="bd-9">.bd-6</div>
</div>

output :
.bd-3
.bd-9
.bd-6
.bd-6

multi devices classes can be used:
<div class="row">
<div class="sd-6 bd-4 md-3">sd-6 bd-4 md-3</div>
<div class="sd-6 bd-4 md-3">sd-6 bd-4 md-3</div>
<div class="sd-6 bd-4 md-3">sd-6 bd-4 md-3</div>
<div class="sd-6 bd-4 md-3">sd-6 bd-4 md-3</div>
</div>

Output:
try to resize your browser and see how do is work
sd-6 bd-4 md-3
sd-6 bd-4 md-3
sd-6 bd-4 md-3
sd-6 bd-4 md-3