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