From 881f69c3eaa79b68176f52b8bd0167acae2cfb4a Mon Sep 17 00:00:00 2001
From: Bass Jobsen <bass@w3masters.nl>
Date: Sun, 24 Apr 2016 11:44:01 +0200
Subject: [PATCH 1/2] Update overview.md

add the `@include media-breakpoint-only()` and `@include media-breakpoint-between` mixins
---
 docs/layout/overview.md | 42 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index c8652cb7aa..103bc54496 100644
--- a/docs/layout/overview.md
+++ b/docs/layout/overview.md
@@ -111,3 +111,45 @@ Once again, these media queries are also available via Sass mixins:
 @include media-breakpoint-down(md) { ... }
 @include media-breakpoint-down(lg) { ... }
 {% endhighlight %}
+
+We also have media between the breakpoint's minimum and maximum widths for only the given screen size:
+
+{% highlight scss %}
+// Extra small devices (portrait phones, less than 544px)
+@media (max-width: 543px) { ... }
+
+// Small devices (landscape phones, 544px and up)
+@media (min-width: 544px) and (max-width: 767px) { ... }
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991px) { ... }
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199px) { ... }
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) { ... }
+{% endhighlight %}
+
+These media queries are also available via Sass mixins:
+
+{% highlight scss %}
+@include media-breakpoint-only(xs) { ... }
+@include media-breakpoint-only(sm) { ... }
+@include media-breakpoint-only(md) { ... }
+@include media-breakpoint-only(lg) { ... }
+@include media-breakpoint-only(xl) { ... }
+
+And finally media that spans multiple breakpoint widths:
+
+{% highlight scss %}
+// Example 
+// Medium devices (tablets, 768px and up) and  Large devices (desktops, 992px and up)
+@media (min-width: 768px) and (max-width: 1199px) { ... }
+{% endhighlight %}
+
+The Sass mixin for the above example look like that shown beneath:
+
+{% highlight scss %}
+@include media-breakpoint-between(md, lg) { ... }
+{% endhighlight %}

From 3e40121cf87f10651d138f44b7f9c1a314bb6f2a Mon Sep 17 00:00:00 2001
From: Bass Jobsen <bass@w3masters.nl>
Date: Sun, 24 Apr 2016 11:54:50 +0200
Subject: [PATCH 2/2] Update overview.md

endtag for the highlight
---
 docs/layout/overview.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index 103bc54496..44a12aee61 100644
--- a/docs/layout/overview.md
+++ b/docs/layout/overview.md
@@ -139,6 +139,7 @@ These media queries are also available via Sass mixins:
 @include media-breakpoint-only(md) { ... }
 @include media-breakpoint-only(lg) { ... }
 @include media-breakpoint-only(xl) { ... }
+{% endhighlight %}
 
 And finally media that spans multiple breakpoint widths: