From e34e73714a4a6d73145f434d74594a45d6d145a8 Mon Sep 17 00:00:00 2001 From: Alex Kalicki Date: Sat, 28 Sep 2013 22:51:30 -0400 Subject: [PATCH] Better documentation and optimized examples for grid classes --- css.html | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/css.html b/css.html index 965bdc5481..51c075984a 100644 --- a/css.html +++ b/css.html @@ -173,6 +173,7 @@ base_url: "../" +

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.

@@ -278,27 +279,27 @@ base_url: "../"
.col-xs-12 .col-sm-6 .col-md-8
-
.col-xs-6 .col-sm-6 .col-md-4
+
.col-xs-6 .col-md-4
-
.col-xs-6 .col-sm-4 .col-md-4
-
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4
{% highlight html %}
.col-xs-12 .col-sm-6 .col-md-8
-
.col-xs-6 .col-sm-6 .col-md-4
+
.col-xs-6 .col-md-4
-
.col-xs-6 .col-sm-4 .col-md-4
-
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4
{% endhighlight %}