Fix: bartificer#27 topBanner shows in narrow, sideBanner in wide

sidebar-left only exists if there's enough room. on narrower screens there is no sidebar and there's a top banner instead.

Author: podfeet

src/index.html

@@ -17,12 +17,12 @@
       <section id="main" class="col order-2"> <!-- open section for content right of graphic -->
 
         <div class="row">  <!-- open row for topBanner on mobile screens -->
-          <section id="top-art" class="col order-4 d-inline-flex d-md-none">
+          <section id="top-art" class="col order-4 d-inline-flex d-lg-none">
             <picture>
-              <!-- show this up to sm -->
-              <source media="(max-width: 596px)" srcset="/assets/topBanner.png">
+              <!-- show this up to lg -->
+              <source media="(max-width: 768px)" srcset="/assets/topBanner.png">
               <!-- else show this -->
-              <img class="img-fluid" alt="XKPasswd - A Secure Memorable Password Generators" src="/assets/sideBanner.png">
+              <img class="img-fluid" alt="XKPasswd - A Secure Memorable Password Generators" src="/assets/topBanner.png">
             </picture>
           </section>
         </div> <!-- close row for topBanner on mobile screens -->
@@ -293,10 +293,10 @@ <h3>Generate Password(s)</h3>
         </section> <!-- close section for content below nav -->
       </section> <!-- close section for content right of graphic -->
 
-      <section id="sidebar-left" class="col-2 order-1 d-none d-md-inline"> <!-- open section for graphic -->
+      <section id="sidebar-left" class="col-2 order-1 d-none d-lg-inline"> <!-- open section for graphic -->
         <picture>
-          <!-- else show this -->
-        <source media="(max-width: 768px)" srcset="/assets/sideBanner.png">
+          <!-- show this on large and above -->
+        <source media="(max-width: 992px)" srcset="/assets/sideBanner.png">
         <!-- else show this -->
         <img class="img-fluid" alt="XKPasswd - A Secure Memorable Password Generators" src="/assets/sideBanner.png">
         </picture>