diff --git a/Resources/Private/Partials/Date/ListTable.html b/Resources/Private/Partials/Date/ListTable.html
index 2c9180a..8636a8e 100644
--- a/Resources/Private/Partials/Date/ListTable.html
+++ b/Resources/Private/Partials/Date/ListTable.html
@@ -5,15 +5,15 @@
 
     <f:for each="{pagination.paginator.paginatedItems}" as="date" iteration="index">
         <div class="row mt-3 mb-3 pb-3">
-            <div class="col-2">
+            <div class="col-12 order-2 mb-3 mb-md-0 col-md-2 order-md-1">
                 <f:if condition="{f:format.date(format: 'H:i', date: '{date.start}')} != '00:00'">
-                    <b><f:format.date format="H:i">{date.start}</f:format.date></b><br>
+                    <b class="d-inline d-md-block"><f:format.date format="H.i">{date.start}</f:format.date></b>
                 </f:if>
-                <b><f:format.date format="%a">{date.start}</f:format.date></b><br>
-                <b><f:format.date format="d.m.">{date.start}</f:format.date></b><br>
+                <b class="d-inline d-md-block"><f:format.date format="%a">{date.start}</f:format.date></b>
+                <b class="d-inline d-md-block"><f:format.date format="d.m.">{date.start}</f:format.date></b>
                 {date.event.region.title}<br>
             </div>
-            <div class="col-6">
+            <div class="col-12 order-3 col-md-6 order-md-2">
 
                 <f:if condition="{date.canceled} == 'canceled'">
                     <h4 class="bg-secondary text-white p-2">
@@ -28,7 +28,7 @@
                 <p><strong>{date.event.teaser}</strong></p>
                 <f:format.crop maxCharacters="150">{date.event.details}</f:format.crop>
             </div>
-            <div class="col-4 position-relative">
+            <div class="col-12 order-1 mb-3 mb-md-0 col-md-4 order-md-3 position-relative">
                 <f:if condition="{date.event.images.0}">
                     <f:then>
                         <f:link.action pageUid="{settings.showPID}" action="show" controller="Date" arguments="{date: date}">
diff --git a/Resources/Private/Templates/Date/Show.html b/Resources/Private/Templates/Date/Show.html
index 3ebc684..4e7014c 100644
--- a/Resources/Private/Templates/Date/Show.html
+++ b/Resources/Private/Templates/Date/Show.html
@@ -2,7 +2,7 @@
     <f:layout name="Default" />
     <f:section name="content">
         <div class="row">
-            <div class="col-6">
+            <div class="col-12 mb-3 mb-md-0 col-md-6">
                 <f:if condition="{date.event.images.0}">
                     <f:then>
                         <f:image image="{date.event.images.0}" alt="" width="480c" height="320c" class="img-fluid img-thumbnail"/>
@@ -12,7 +12,7 @@
                     </f:else>
                 </f:if>
             </div>
-            <div class="col-6">
+            <div class="col-12 col-md-6">
                 <f:if condition="{date.canceled} == 'canceled'">
                     <h4 class="bg-secondary text-white p-2">
                         <f:translate key="LLL:EXT:events/Resources/Private/Language/locallang.xlf:tx_events.date.canceled" />
@@ -21,7 +21,7 @@
                 <h4>
                     <f:format.date format="%a">{date.start}</f:format.date>
                     <f:format.date format="d.m.">{date.start}</f:format.date>
-                    <f:format.date format="H:i">{date.start}</f:format.date> Uhr
+                    <f:format.date format="H.i">{date.start}</f:format.date> Uhr
                 </h4>
                 <h2>{date.event.title}</h2>
                 <h3>{date.event.teaser}</h3>
@@ -34,7 +34,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-4">
+            <div class="col-12 col-md-4">
                 <p><b>Preis:</b><br>
                     <f:if condition="{date.event.priceInfo}">
                         <f:then>
@@ -52,7 +52,7 @@
                     </p>
                 </f:if>
             </div>
-            <div class="col-4">
+            <div class="col-12 col-md-4">
                 <p><b>Veranstaltungsort:</b><br>
                     {date.event.location.name}<br>
                     {date.event.location.street}<br>
@@ -60,7 +60,7 @@
                     {date.event.location.phone}<br>
                 </p>
             </div>
-            <div class="col-4">
+            <div class="col-12 col-md-4">
                 <p><b>Veranstalter:</b><br>
                     {date.event.organizer.name}<br>
                     {date.event.organizer.street}<br>