diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 5b576964..7325f728 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -903,6 +903,11 @@ form.well { border-top-width: 0px; padding: 0; } + + /* Space out the show-grid examples */ + .row-desktop.show-grid [class*="span"] { + margin-bottom: 5px; + } } diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 5e9a2bfb..ebf423f4 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -71,6 +71,10 @@
{{_i}}Get the best of both worlds with a semi-fluid layout. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.{{/i}}
+{{_i}}By default columns of a row are show next to each other for tablets and desktops and not for phones. A desktop row displays acts like a row for desktops only and not for tablets or phones.{{/i}}
+{{_i}}By default columns of a .row are show next to each other, however for phones the columns are show underneath each other. By adding the class .row-desktop to a row,
+ it will display the columns underneath each other for tablets as well.{{/i}}
{{_i}}Resize your browser to see the rows behave differently. They look the same for desktops and phones, but different for tablets.{{/i}}
+