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-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

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