Responsive ads

_sass/2017/components/headline-ad.scss

@@ -73,7 +73,7 @@
 
   .carbon-text:hover,
   .carbon-poweredby:hover {
-    color: $baseB3;
+    color: $baseA;
   }
 }
 

_sass/2017/components/main-heading.scss

@@ -26,15 +26,41 @@
 .main-heading.-with-ads {
   & {
     display: flex;
-    align-items: flex-end; // bottom alighn
   }
 
-  & > h1 {
-    flex: 1 0 auto;
+  @media (min-width: 541px) {
+    & {
+      align-items: flex-end; // bottom alighn
+    }
+
+    & > h1 {
+      flex: 1 0 auto;
+    }
+
+    // Advertisement
+    & > .ad {
+      flex: 0 1 auto;
+    }
   }
 
-  // Advertisement
-  & > .ad {
-    flex: 0 1 auto;
+  @media (max-width: 540px) {
+    & {
+      flex-direction: column;
+      flex-wrap: wrap;
+    }
+
+    & > h1,
+    & > .ad {
+      flex: 1 0 100%;
+    }
+
+    & > h1 {
+      order: 2;
+    }
+
+    & > .ad {
+      order: 1;
+      margin-left: auto;
+    }
   }
 }