title: move figcaption under the image for mobile devices
body: <p>i'm in the process of making an old site responsive and i've encountered a few hurdles.</p>
  <p>I would like the desktop version to show the fig captions on the right side, but in the mobile version the fig captions should be under the figure.
  Unfortunately, I can't get the figcaptions to appear under the image.</p>
  <p>I am thankful for every help!</p>
  <p>Best wishes</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    &lt;style type="text/css"&gt;
          body {
              margin: 60px;
          }
          .sidebar {
              margin: 0;
  
              padding: 0;
              text-align: left;
              width: 100%;
              background-color: transparent;
              position: fixed;
              height: 100%;
              overflow: auto;
             
              list-style-type: none;
              font-size: 14px !important;
          }
  
          .sidebar a {
              display: block;
              color: #666666;
              padding: 8px;
              text-decoration: none;
              list-style-type: none;
          }
  
          .sidebar li {
              list-style: none;
              text-decoration: none;
          }
  
  
          .sidebar a.active {
              background-color: transparent;
              color: #4d4d4d;
              list-style-type: none;
          }
  
          .sidebar a:hover:not(.active) {
              background-color: transparent;
              color: rgb(49, 49, 49);
          }
          .figure {
      
              margin: 0;
          }
          .figure img {
              vertical-align:;
          }
          .figure figcaption {
            
              margin-left: 10px;
          }
          @media screen and (min-width: 768px) {.d-xl-none{display: none; }}
  
          
          @media screen and (max-width: 768px) {
              body {margin: 20px;}
              div.content {margin-left: 0;}
              div.preview {margin-left: 0;}
              .sidebar {height: 100%;position: relative;text-align: center;margin-bottom: 0px !important;display: none; }
              .sidebar a {float: left;align-items: center; }
              .caption {text-align: center !important; }
              .containerCarousel {margin-top: 0px;margin-bottom: 150px;width: 1fr;} }
              #LP_img{align-content: center; margin: 0 auto;}
  
              .overlay {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left: 0;background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.9);overflow-x: hidden;transition: 0.5s;}
              .overlay-content {position: relative;top: 10%;width: 100%;text-align: center;margin-top: 30px;}
              .overlay a {padding: 8px;text-decoration: none;font-size: 15px;color: #818181;display: block;transition: 0.3s;}
              .overlay a:hover,
              .overlay a:focus {color: #f1f1f1;}
              .overlay .closebtn {position: absolute;top: 20px; right: 45px; font-size: 40px;}
  
          @media screen and (max-height: 480px) {
              .overlay a {font-size: 20px }
              .overlay .closebtn {font-size: 20px;top: 15px; right: 35px;}
              .sidebar a {text-align: center;float: none;}
              .sidebar {display: none; }
              .content { margin-top: 10px !important;}
              .preview { margin-top: 10px !important; }
              .caption {text-align: center !important; }
              .imagePreview {margin: auto 0;}
          }
  
          .imagePreview{
  
            max-width: 400px;
  
          }
         
      &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;title&gt;Christoph Urwalek&lt;/title&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
      &lt;!-- START Mobile Nav--&gt;
      &lt;div class="continer"&gt;
      
      &lt;div id="myNav" class="overlay"&gt;
          &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
          &lt;div class="overlay-content"&gt;
              &lt;a href="./painting.html"&gt;painting&lt;/a&gt;
              &lt;a href="./hungabunga.html"&gt;drawing&lt;/a&gt;
              &lt;a href="#"&gt;collage&lt;/a&gt;
              &lt;a href="#"&gt;video&lt;/a&gt;
              &lt;a href="#"&gt;current&lt;/a&gt;
              &lt;a href="#"&gt;text&lt;/a&gt;
              &lt;a href="#"&gt;biography&lt;/a&gt;
              &lt;a href="#"&gt;contact&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;span class="d-xl-none" style="font-size:30px;cursor:pointer; color: #4d4d4d;" onclick="openNav()"&gt;&amp;#9776; &lt;font size="-1"&gt;&lt;b&gt;Christoph Urwalek&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;
    &lt;/div&gt;
      &lt;!-- END Mobile Nav--&gt;
      &lt;!--START Wrapper--&gt;
      &lt;div class="container-fluid my-container align-items-center"&gt;
          &lt;!--START Sidebar --&gt;
          &lt;div class="row my-row"&gt;
              &lt;div class="col-md-3 "&gt;
                  &lt;nav class="sidebar-header sidebar"&gt;
                      &lt;li&gt;&lt;a class="active" href="./hungabunga.html"&gt;&lt;b&gt;Christoph Urwalek&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="./painting.html"&gt;painting&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="./drawing.html"&gt;drawing&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;collage&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;video&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a&gt; &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;current&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;biography&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
              &lt;!--END Sidebar --&gt;
              
              &lt;div class="col-md-9 "&gt;
  
                      &lt;table class="table table-borderless "&gt;
                        &lt;tbody&gt;
                          &lt;!----&gt;
                          &lt;tr&gt;
                            &lt;td&gt;&lt;figure class="figure d-flex justify-content-center"&gt;
                              &lt;img src="http://christophurwalek.at/index/Wandcollage.jpg" class="figure-img img-fluid rounded imagePreview" alt="A generic square placeholder image with rounded corners in a figure."&gt;
                              &lt;figcaption class="figure-caption"&gt;&lt;a href="###"&gt;Test first line&lt;br&gt;Test second line&lt;/figcaption&gt;
                            &lt;/figure&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                         &lt;!----&gt;
                         
                         &lt;!----&gt;
                         
                          &lt;tr&gt;
                            &lt;div class="container"&gt;
                            &lt;td&gt;&lt;figure class="figure d-flex justify-content-center"&gt;
                              &lt;img src="./assets/img/thumbnails/Fake_35x47cm_2020__.jpg" class="figure-img img-fluid rounded imagePreview" alt="A generic square placeholder image with rounded corners in a figure."&gt;
                              &lt;figcaption class="figure-caption caption center-block"&gt;real_FAKE&lt;br&gt;2020&lt;/figcaption&gt;
                             
                            &lt;/figure&gt;
                          &lt;/div&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                           &lt;!----&gt;
                           &lt;tr&gt;
                            &lt;td&gt;&lt;figure class="figure d-flex justify-content-center"&gt;
                              &lt;img src="./assets/img/thumbnails/Various_2020_wand.jpg" class="figure-img img-fluid rounded imagePreview" alt="A generic square placeholder image with rounded corners in a figure."&gt;
                              &lt;figcaption class="figure-caption"&gt;Various III&lt;/figcaption&gt;
                              &lt;figcaption class="figure-caption"&gt;2020&lt;/figcaption&gt;
                            &lt;/figure&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          
  
                          
  
  
                        &lt;/tbody&gt;
                      &lt;/table&gt;
  
  
  
                           
  
              &lt;/div&gt;
              
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div class="container"&gt;
  
      
      &lt;!--END Wrapper--&gt;
      &lt;script type=""&gt;
          function openNav() {
            document.getElementById("myNav").style.width = "100%";
          }
          
          function closeNav() {
            document.getElementById("myNav").style.width = "0%";
          }
          &lt;/script&gt;
  
  
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
          integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;
      &lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
          integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;
      &lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
          integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>sorry for adding all the code..
  I don't know what could have been of importance to you.</p>