contact us retains position, duplicate tags change displays based on breakpoints

Author: sjv01180

index.html

@@ -244,6 +244,8 @@ <h1>Frequently Asked Questions</h1>
                             <p>Maybe next year we'll have AI run the event...</p>
                         </div>
                     </div>
+		    <p id="contact-desktop" class="contact">Don't see your question here? <a href="mailto:hello@coderit.org">Contact Us</a></p>
+
                 </div>
                 <div id="faq-cards-right">
                     <div class="card">
@@ -288,7 +290,7 @@ <h1>Frequently Asked Questions</h1>
                     </div>
                 </div>
             </div>
-            <p id="contact">Don't see your question here? <a href="mailto:hello@coderit.org">Contact Us</a></p>
+            <p id="contact-laptop" class="contact">Don't see your question here? <a href="mailto:hello@coderit.org">Contact Us</a></p>
         </div>
     </section>
     <section id="leadership">

sass/main.scss

@@ -468,7 +468,7 @@ nav {
                 }
             }
         }
-        #contact {
+        .contact {
             a {
                 text-transform: uppercase;
                 color: $red;
@@ -478,6 +478,12 @@ nav {
                 }
             }
         }
+	#contact-desktop {
+	    display: block;
+	}
+	#contact-laptop {
+	    display: none;
+	}
     }
 }
 
@@ -728,13 +734,21 @@ footer {
         }
     }
 
-    #faq #faq-wrapper #faq-cards {
-        flex-direction: column;
+    #faq #faq-wrapper { 
+        #faq-cards {
+            flex-direction: column;
+            &-left, &-right {
+                margin: 0;
+                width: 100%;
+            }
 
-        &-left, &-right {
-            margin: 0;
-            width: 100%;
+	    #contact-desktop {
+	        display: none;
+	    }
         }
+	#contact-laptop {
+	    display: block;
+	}
     }
 
     #leadership #leaders {