fix general page and page header layout

docs/_layouts/page.html

@@ -2,19 +2,19 @@
 layout: default
 ---
 
-<div class="bd-pageheader">
+<div class="bd-pageheader text-xs-center text-sm-left">
   <div class="container">
-    {% include ads.html %}
     {% include page-headers.html %}
+    {% include ads.html %}
   </div>
 </div>
 
 <div class="container">
   <div class="row">
-    <div class="col-sm-3 col-sm-push-9 bd-sidebar">
+    <div class="col-md-3 col-md-push-9 bd-sidebar">
       {% include nav-docs.html %}
     </div>
-    <div class="col-sm-9 col-sm-pull-3 bd-content">
+    <div class="col-md-9 col-md-pull-3 bd-content">
       <h1 class="bd-title">{{ page.title }}</h1>
       {{ content }}
     </div>

docs/assets/scss/_ads.scss

@@ -6,9 +6,10 @@
   width: auto !important;
   height: auto !important;
   padding: 1.25rem !important;
-  margin: 0 -1.5rem 2rem !important;
+  margin: 2rem -1.5rem -2rem !important;
   overflow: hidden; // clearfix
   font-size: .8rem !important;
+  font-family: inherit !important;
   line-height: 1rem !important;
   color: $bd-purple-light !important;
   text-align: left;
@@ -65,3 +66,7 @@
     border-radius: .25rem;
   }
 }
+
+@include media-breakpoint-up(md) {
+
+}

docs/assets/scss/_layout.scss

@@ -34,19 +34,23 @@
 
 
 .bd-pageheader {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  padding: 2rem .75rem;
   margin-bottom: 3rem;
   color: $bd-purple-light;
   background-color: $bd-purple;
 
+  .container {
+    position: relative;
+  }
+
   h1 {
-    font-size: 4rem;
+    font-size: 3rem;
     font-weight: normal;
     color: #fff;
   }
 
   p {
+    margin-bottom: 0;
     font-size: 1.5rem;
   }
 
@@ -55,8 +59,27 @@
     padding-bottom: 4rem;
 
     .carbonad {
-      float: right;
-      margin-left: 2rem !important;
+      margin: 2rem 0 0 !important;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    h1 {
+      font-size: 4rem;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    h1,
+    p {
+      margin-right: 380px;
+    }
+
+    .carbonad {
+      position: absolute;
+      top: 0;
+      right: .75rem; // offset from the .container's padding
+      margin: 0 !important;
     }
   }
 }