diff --git a/docs/layouts/_shortcodes/class-options.html b/docs/layouts/_shortcodes/class-options.html
index 1282298af..197c25500 100644
--- a/docs/layouts/_shortcodes/class-options.html
+++ b/docs/layouts/_shortcodes/class-options.html
@@ -31,32 +31,46 @@
 
 {{ if and $data $data.options }}
   <div class="class-options">
-    <table class="table table-striped">
-      <thead>
-        <tr>
-          <th>Parameter</th>
-          <th>Type</th>
-          <th>Description</th>
-          <th>Default Value</th>
-        </tr>
-      </thead>
-      <tbody>
-        {{ range $data.options }}
-          <tr>
-            <td><code>{{ .parameterName }}</code></td>
-            <td><code>{{ .type }}</code></td>
-            <td>{{ .description | markdownify }}</td>
-            <td>
-              {{ if .defaultValue }}
-                <code>{{ .defaultValue }}</code>
-              {{ else }}
-                <em>Not specified</em>
-              {{ end }}
-            </td>
-          </tr>
-        {{ end }}
-      </tbody>
-    </table>
+    <!-- Header row for larger screens -->
+    <div class="row d-none d-md-flex bg-light border-bottom border-2 fw-bold py-2 mb-2">
+      <div class="col-md-3">Parameter</div>
+      <div class="col-md-2">Type</div>
+      <div class="col-md-5">Description</div>
+      <div class="col-md-2">Default Value</div>
+    </div>
+    
+    <!-- Options rows -->
+    {{ range $data.options }}
+      <div class="row border-bottom py-3 mb-2">
+        <!-- Parameter -->
+        <div class="col-12 col-md-3 mb-2 mb-md-0">
+          <div class="d-md-none fw-bold text-muted small">Parameter:</div>
+          <code class="text-primary">{{ .parameterName }}</code>
+        </div>
+        
+        <!-- Type -->
+        <div class="col-12 col-md-2 mb-2 mb-md-0">
+          <div class="d-md-none fw-bold text-muted small">Type:</div>
+          <code class="text-info">{{ .type }}</code>
+        </div>
+        
+        <!-- Description -->
+        <div class="col-12 col-md-5 mb-2 mb-md-0">
+          <div class="d-md-none fw-bold text-muted small">Description:</div>
+          <div>{{ .description | markdownify }}</div>
+        </div>
+        
+        <!-- Default Value -->
+        <div class="col-12 col-md-2">
+          <div class="d-md-none fw-bold text-muted small">Default Value:</div>
+          {{ if .defaultValue }}
+            <code class="text-success">{{ .defaultValue }}</code>
+          {{ else }}
+            <em class="text-muted">Not specified</em>
+          {{ end }}
+        </div>
+      </div>
+    {{ end }}
   </div>
 {{ else if not $dataFile }}
   <div class="alert alert-warning">