Mobile layout for control.header + use after element for bottom border on umb-control-group, so we can use margin to space above, to allow for margin collapse for margin-bottom on controls and control-description.

src/Umbraco.Web.UI.Client/src/less/main.less

@@ -116,16 +116,26 @@ h5.-black {
   margin: 20px;
 }
 .umb-control-group {
-  border-bottom: 1px solid @gray-11;
-  padding-bottom: 20px;
+    position: relative;
+    &::after {
+        content: '';
+        margin-top: 20px;
+        width: 100%;
+        height: 1px;
+        background-color: @gray-11;
+    }
 }
 
 .umb-control-group.-no-border {
-  border: none;
+  &::after {
+    content: none;
+  }
 }
 
 .umb-property:last-of-type .umb-control-group {
-  border: none;
+  &::after {
+    content: none;
+  }
   margin-bottom: 0 !important;
   padding-bottom: 0;
 }
@@ -163,7 +173,7 @@ h5.-black {
 }
 
 .umb-control-group .umb-el-wrap {
-  padding: 0
+  padding: 0;
 }
 .form-horizontal .umb-control-group .control-header {
     float: left;
@@ -181,8 +191,19 @@ h5.-black {
     .control-description {
         display: block;
         clear: both;
+        max-width:480px;// avoiding description becoming too wide when its placed on top of property.
+        margin-bottom: 10px;
     }
 }
+@media (max-width: 767px) {
+    
+    .form-horizontal .umb-control-group .control-header {
+        float: none;
+        width: 100%;
+    }
+    
+
+}
 
 /* LABELS*/
 .umb-control-group label.control-label, .umb-control-group .control-label {