From e2e8311776895d96e5ce686830ed500916b299e2 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Fri, 25 Aug 2017 14:36:56 +0800
Subject: [PATCH] Responsive ads

---
 _sass/2017/components/headline-ad.scss  |  2 +-
 _sass/2017/components/main-heading.scss | 38 +++++++++++++++++++++----
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/_sass/2017/components/headline-ad.scss b/_sass/2017/components/headline-ad.scss
index 273b6f5d4..c11e7c98c 100644
--- a/_sass/2017/components/headline-ad.scss
+++ b/_sass/2017/components/headline-ad.scss
@@ -73,7 +73,7 @@
 
   .carbon-text:hover,
   .carbon-poweredby:hover {
-    color: $baseB3;
+    color: $baseA;
   }
 }
 
diff --git a/_sass/2017/components/main-heading.scss b/_sass/2017/components/main-heading.scss
index c7e5d9992..388199ca7 100644
--- a/_sass/2017/components/main-heading.scss
+++ b/_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;
+    }
   }
 }