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: 14rem;
+        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,14 +137,25 @@
 
 // -- Modules
 .media-list {
-  width: 100%;
+  @include breakpoint(small) {
-  .resource-link {
+    display: flex;
-    width: auto;
+    flex-direction: column;
-    display:inline-block;
+    width: 100%;
-    > * {
+    .resource-link {
-      float: left;
+      width: auto;
-      clear: both;
+      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,17 +51,14 @@ $("#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(); ?>
+              <?= $media->displayTitle(); ?>
+            </span>
           </a>
-      </div>
+        </div>
     <?php endforeach; ?>
 </div>
 <?php endif; ?>