edited view for media so it has classes and not styles

asset/scss/components/_lists.scss

@@ -1,9 +1,26 @@
+@include breakpoint(small) {
   dl {
     .property {
       display:flex;
+      flex-direction:column;
       dt {
-        width: 14rem;
+        min-width: unset;
+        max-width: unset;
+        width: unset;
+      }
+    }
+  }
+}
+@include breakpoint(medium) {
+  dl {
+    .property {
+      display:flex;
+      flex-direction:row;
+      dt {
+        min-width: 14rem;
         max-width: 14rem;
+        width: 14rem;
       }
     }
   }
+}

asset/scss/global/_omeka.scss

@@ -137,15 +137,26 @@
 
 // -- Modules
 .media-list {
+  @include breakpoint(small) {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     .resource-link {
       width: auto;
       display:inline-block;
+      padding-right: $global-padding;
       > * {
         float: left;
         clear: both;
       }
     }
+    .resource-name {
+      font-size: 0.8rem;
+    }
+  }
+  @include breakpoint(medium) {
+    flex-direction: row;
+  }
 }
 
 

view/omeka/site/item/show.phtml

@@ -51,15 +51,12 @@ $("#archive_page_title").html('<?php echo $_html ?>');
 <div class="media-list" style="display: flex;">
     <?php foreach ($itemMedia as $media): ?>
         <?php echo $media->linkPretty(); ?>
-        <br />
+        <div class="resource">
-        <div style="display: flex;
+          <a class="resource-link" href="<?= $media->originalUrl(); ?>">
-                    flex: 1;
-                    flex-direction: column;
-                    padding: 0 10px 10px 0;">
-          <a href="<?= $media->originalUrl(); ?>">
             <img src="<?= $media->thumbnailUrl("square"); ?>" />
-            <br />
+            <span class="resource-name"> 
               <?= $media->displayTitle(); ?>
+            </span>
           </a>
         </div>
     <?php endforeach; ?>