diff --git a/css.html b/css.html index 9824e9923a..b34cb4b92b 100644 --- a/css.html +++ b/css.html @@ -172,6 +172,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.

@@ -277,27 +278,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 %}