diff --git a/Resources/views/css/admin.css.twig b/Resources/views/css/admin.css.twig
index 971e312b07..bfb668d41a 100644
--- a/Resources/views/css/admin.css.twig
+++ b/Resources/views/css/admin.css.twig
@@ -580,82 +580,35 @@ body.list #content-header #content-search .input-group:after {
 }
 
 body.list table {
-    background: {{ colors.white }};
-    border: 1px solid {{ colors.table_border }};
-    margin-bottom: 10px;
-}
-body.list table thead th {
-    background: {{ colors.table_header }};
-    padding: 0;
-}
-body.list table thead th i {
-    color: {{ colors.gray_dark }};
-    padding: 0 3px;
-}
-body.list table thead th a,
-body.list table thead th span {
-    color: {{ colors.text }};
-    display: block;
-    padding: 10px 6px;
-    white-space: nowrap;
-}
-body.list table thead th a:hover {
-    background: {{ colors.gray_lighter }};
-    color: {{ brand_color }};
-    text-decoration: none;
-}
-body.list table thead th a:hover i {
-    color: {{ brand_color }};
-}
-
-body.list table thead th.sorted,
-body.list table thead th.sorted a {
-    background: {{ brand_color }};
-    color: {{ colors.white }};
-    text-decoration: none;
-}
-body.list table thead th.sorted a:hover i,
-body.list table thead th.sorted i {
-    color: {{ colors.white }};
-}
-body.list table tbody td.sorted {
-    background: {{ colors.gray_lighter }};
-    border-color: {{ colors.table_row_border }};
-}
-
-body.list table thead th.boolean,
-body.list table tbody td.boolean,
-body.list table thead th.toggle,
-body.list table tbody td.toggle {
-    text-align: center;
-}
-
-body.list .table thead tr th {
-    border-bottom: 2px solid {{ colors.gray }};
-}
-body.list .table thead tr th.sorted {
-    border-bottom: 2px outset {{ brand_color }};
+    background: transparent;
+    border: 0;
 }
-/* these styles are needed to fix some visual glitches when the sort field is the first column */
-body.list .table thead tr th:first-child.sorted {
-    border-left: 1px solid {{ brand_color }};
-    border-top: 1px solid {{ brand_color }};
+body.list table thead {
+    display: none;
 }
 body.list .table tbody {
-{% if 'dark' == color_scheme %}
-    border-bottom: 2px solid {{ brand_color }};
-{% elseif 'light' == color_scheme %}
-    /* this '1px double' style is correct because 'double' gives the border more priority
-       and allows us to override the table border bottom (otherwise this border won't
-        be shown) */
-    border-bottom: 1px double {{ colors.gray }};
-{% endif %}
+    background: transparent;
+    border: 0;
 }
-body.list .table tbody tr:hover td {
-    background: {{ colors.gray_lighter }};
+body.list table tbody tr {
+    background: {{ colors.white }};
+    border: 1px solid {{ colors.gray }};
+    display: block;
+    margin-bottom: 1em;
 }
 body.list table tbody td {
     border-bottom: 1px solid {{ colors.table_row_border }};
+    border-top: 0;
+    display: block;
+    text-align: right;
+}
+body.list table tbody td:last-child {
+    border-bottom: 0;
+}
+table td:before {
+    content: attr(data-label);
+    float: left;
+    font-weight: bold;
 }
 body.list table tbody td.actions a {
     margin-right: 10px;
@@ -887,6 +840,96 @@ body.error .error-solution pre {
         float: right;
     }
 
+    body.list table {
+        background: {{ colors.white }};
+        border: 1px solid {{ colors.table_border }};
+    }
+    body.list table thead {
+        display: table-header-group;
+    }
+    body.list table thead th {
+        background: {{ colors.table_header }};
+        padding: 0;
+    }
+    body.list table thead th i {
+        color: {{ colors.gray_dark }};
+        padding: 0 3px;
+    }
+    body.list table thead th a,
+    body.list table thead th span {
+        color: {{ colors.text }};
+        display: block;
+        padding: 10px 6px;
+        white-space: nowrap;
+    }
+    body.list table thead th a:hover {
+        background: {{ colors.gray_lighter }};
+        color: {{ brand_color }};
+        text-decoration: none;
+    }
+    body.list table thead th a:hover i {
+        color: {{ brand_color }};
+    }
+    body.list table thead th.sorted,
+    body.list table thead th.sorted a {
+        background: {{ brand_color }};
+        color: {{ colors.white }};
+        text-decoration: none;
+    }
+    body.list table thead th.sorted a:hover i,
+    body.list table thead th.sorted i {
+        color: {{ colors.white }};
+    }
+    body.list table thead th.boolean,
+    body.list table tbody td.boolean,
+    body.list table thead th.toggle,
+    body.list table tbody td.toggle {
+        text-align: center;
+    }
+    body.list .table thead tr th {
+        border-bottom: 2px solid {{ colors.gray }};
+    }
+    body.list .table thead tr th.sorted {
+        border-bottom: 2px outset {{ brand_color }};
+    }
+    /* these styles are needed to fix some visual glitches when the sort field is the first column */
+    body.list .table thead tr th:first-child.sorted {
+        border-left: 1px solid {{ brand_color }};
+        border-top: 1px solid {{ brand_color }};
+    }
+    body.list .table tbody {
+{% if 'dark' == color_scheme %}
+        border-bottom: 2px solid {{ brand_color }};
+{% elseif 'light' == color_scheme %}
+        /* this '1px double' style is correct because 'double' gives the border more priority
+           and allows us to override the table border bottom (otherwise this border won't
+            be shown) */
+        border-bottom: 1px double {{ colors.gray }};
+{% endif %}
+    }
+    body.list table tbody tr {
+        border: 0;
+        display: table-row;
+        margin-bottom: 0;
+    }
+    body.list table tbody td {
+        border-bottom: 0;
+        border-top: 1px solid {{ colors.table_row_border }};
+        display: table-cell;
+        text-align: left;
+    }
+    table td:before {
+        content: none;
+        float: none;
+    }
+    body.list table tbody td.sorted {
+        background: {{ colors.gray_lighter }};
+        border-color: {{ colors.table_row_border }};
+    }
+    body.list .table tbody tr:hover td {
+        background: {{ colors.gray_lighter }};
+    }
+
     body.new form .field_date select + select,
     body.edit form .field_date select + select {
         margin-left: .5em;
diff --git a/Resources/views/list.html.twig b/Resources/views/list.html.twig
index 189e21ecdf..7516ce14a2 100644
--- a/Resources/views/list.html.twig
+++ b/Resources/views/list.html.twig
@@ -63,6 +63,7 @@
             <table class="table">
                 <thead>
                     <tr>
+                        {% set _table_column_labels = [] %}
                         {% for field, metadata in fields %}
                             {% set isSortingField = metadata.property == app.request.get('sortField') %}
 
@@ -72,6 +73,9 @@
                                     {% set request_attributes = request_attributes|merge({ sortField: metadata.property }) %}
                                 {% endif %}
 
+                                {% set _column_label =  metadata.label ? ( metadata.label|trans(_trans_parameters) ) : ( ('id' == metadata.property) ? 'ID' : field|humanize ) %}
+                                {% set _table_column_labels = _table_column_labels|merge([_column_label]) %}
+
                                 {% if metadata.sortable %}
                                     <a href="{{ path('admin', request_attributes|merge({ sortField: metadata.property, sortDirection: sortDirection|default('DESC') })) }}">
                                         {% if isSortingField and sortDirection == 'DESC' %}
@@ -82,26 +86,19 @@
                                             <i class="fa fa-sort"></i>
                                         {% endif %}
 
-                                        {% if metadata.label %}
-                                            {{ metadata.label|trans(_trans_parameters) }}
-                                        {% elseif 'id' == metadata.property %}
-                                            ID
-                                        {% else %}
-                                            {{ field|humanize }}
-                                        {% endif %}
+                                        {{ _column_label }}
                                     </a>
                                 {% else %}
-                                    {% if metadata.label %}
-                                        <span>{{ metadata.label|trans }}</span>
-                                    {% else %}
-                                        <span>{{ field|humanize }}</span>
-                                    {% endif %}
+                                    <span>{{ _column_label }}</span>
                                 {% endif %}
                             </th>
                         {% endfor %}
+
                         {% if _list_item_actions|length > 0 %}
+                            {% set _column_label =  'list.row_actions'|trans(_trans_parameters) %}
+                            {% set _table_column_labels = _table_column_labels|merge([_column_label]) %}
                             <th>
-                                <span>{{ 'list.row_actions'|trans(_trans_parameters) }}</span>
+                                <span>{{ _column_label }}</span>
                             </th>
                         {% endif %}
                     </tr>
@@ -114,7 +111,7 @@
                             {% for field, metadata in fields %}
                                 {% set isSortingField = metadata.property == app.request.get('sortField') %}
 
-                                <td class="{{ isSortingField ? 'sorted' : '' }} {{ metadata.dataType|lower }}">
+                                <td data-label="{{ _table_column_labels[loop.index0] }}" class="{{ isSortingField ? 'sorted' : '' }} {{ metadata.dataType|lower }}">
                                     {% if metadata.type in ['array', 'json_array', 'simple_array', 'text'] %}
                                         {{ easyadmin_render_field_for_list_view(item, metadata)|easyadmin_truncate }}
                                     {% else %}
@@ -122,8 +119,9 @@
                                     {% endif %}
                                 </td>
                             {% endfor %}
+
                             {% if _list_item_actions|length > 0 %}
-                                <td class="actions">
+                                <td data-label="{{ _table_column_labels|last }}" class="actions">
                                     {% for _action in _list_item_actions %}
                                         {% if 'method' == _action.type %}
                                             {% set _action_href = path('admin', { action: _action.name, view: 'list', entity: _entity.name, id: _item_id }) %}