diff --git a/awx/ui/client/src/job-detail/job-detail.block.less b/awx/ui/client/src/job-detail/job-detail.block.less
index 2c00e9eae5..a22cf4a8c2 100644
--- a/awx/ui/client/src/job-detail/job-detail.block.less
+++ b/awx/ui/client/src/job-detail/job-detail.block.less
@@ -5,7 +5,7 @@
 @import '../shared/layouts/one-plus-one.less';
 
 @breakpoint-md: 1200px;
-@breakpoint-sm: 420px;
+@breakpoint-sm: 623px;
 
 .JobDetail-tasks.section{
     margin-top:40px;
diff --git a/awx/ui/client/src/shared/layouts/one-plus-one.less b/awx/ui/client/src/shared/layouts/one-plus-one.less
index 5b5534f64d..cdeedd92c9 100644
--- a/awx/ui/client/src/shared/layouts/one-plus-one.less
+++ b/awx/ui/client/src/shared/layouts/one-plus-one.less
@@ -36,7 +36,7 @@
 	flex: 1 1;
 	height: @height;
 	width: 100%;
-	max-wdith: 50%;
+	max-width: 50%;
 	margin-right: 0px;
 	.Panel{
 		height: 100%;
diff --git a/awx/ui/client/src/standard-out/adhoc/standard-out-adhoc.partial.html b/awx/ui/client/src/standard-out/adhoc/standard-out-adhoc.partial.html
index 04c762e436..238ffb90a6 100644
--- a/awx/ui/client/src/standard-out/adhoc/standard-out-adhoc.partial.html
+++ b/awx/ui/client/src/standard-out/adhoc/standard-out-adhoc.partial.html
@@ -16,12 +16,12 @@
                 <div class="StandardOut-details">
 
                     <div class="StandardOut-detailsRow" ng-show="job.module_name">
-                        <div class="StandardOut-detailsLabel">Name</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Name</div>
                         <div class="StandardOut-detailsContent">{{ job.module_name }}</div>
                     </div>
 
                     <div class="StandardOut-detailsRow">
-                        <div class="StandardOut-detailsLabel">STATUS</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STATUS</div>
                         <div class="StandardOut-detailsContent">
                             <i class="fa icon-job-{{ job.status }}"></i>
                             <span class="StandardOut-statusText StandardOut--capitalize">{{ job.status }}</span>
@@ -29,33 +29,33 @@
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.started">
-                        <div class="StandardOut-detailsLabel">STARTED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STARTED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.started | longDate }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.finished">
-                        <div class="StandardOut-detailsLabel">FINISHED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">FINISHED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.finished | longDate }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.finished">
-                        <div class="StandardOut-detailsLabel">ELAPSED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">ELAPSED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.elapsed }} seconds
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.module_args">
-                        <div class="StandardOut-detailsLabel">Module Args</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Module Args</div>
                         <div class="StandardOut-detailsContent">{{ job.module_args }}</div>
                     </div>
 
                     <div class="StandardOut-detailsRow">
-                        <div class="StandardOut-detailsLabel">Inventory</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Inventory</div>
                         <div class="StandardOut-detailsContent">
                             <a href="{{ inventory_url }}"
                                 aw-tool-tip="The inventory this command ran on."
@@ -64,7 +64,7 @@
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="credential_name">
-                        <div class="StandardOut-detailsLabel">Credential</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Credential</div>
                         <div class="StandardOut-detailsContent">
                             <a href="{{ credential_url }}"
                                 aw-tool-tip="The credential used to run this command."
@@ -73,7 +73,7 @@
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="created_by">
-                        <div class="StandardOut-detailsLabel">Launched By</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Launched By</div>
                         <div class="StandardOut-detailsContent">
                             <a href="/#/users/{{ created_by.id }}"
                                 aw-tool-tip="The user who ran this command."
@@ -84,19 +84,19 @@
                     <!-- since zero is a falsy value, you need ng-show such that
                     the number is >= 0 -->
                     <div class="StandardOut-detailsRow" ng-show="forks >= 0">
-                        <div class="StandardOut-detailsLabel">Forks</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Forks</div>
                         <div class="StandardOut-detailsContent">{{ forks }}</div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="limit">
-                        <div class="StandardOut-detailsLabel">Limit</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Limit</div>
                         <div class="StandardOut-detailsContent">{{ limit }}</div>
                     </div>
 
                     <!-- since zero is a falsy value, you need ng-show such that
                     the number is >= 0 -->
                     <div class="StandardOut-detailsRow" ng-show="verbosity >= 0">
-                        <div class="StandardOut-detailsLabel">Verbosity</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Verbosity</div>
                         <div class="StandardOut-detailsContent">{{ verbosity }}</div>
                     </div>
                 </div>
diff --git a/awx/ui/client/src/standard-out/inventory-sync/standard-out-inventory-sync.partial.html b/awx/ui/client/src/standard-out/inventory-sync/standard-out-inventory-sync.partial.html
index 174160f4c8..d7724959ce 100644
--- a/awx/ui/client/src/standard-out/inventory-sync/standard-out-inventory-sync.partial.html
+++ b/awx/ui/client/src/standard-out/inventory-sync/standard-out-inventory-sync.partial.html
@@ -16,7 +16,7 @@
                 <div class="StandardOut-details">
 
                     <div class="StandardOut-detailsRow" ng-show="inventory_source_name">
-                        <div class="StandardOut-detailsLabel">NAME</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">NAME</div>
                         <div class="StandardOut-detailsContent">
                             <a href="{{inv_manage_group_link}}">
                                 {{ inventory_source_name }}
@@ -25,7 +25,7 @@
                     </div>
 
                     <div class="StandardOut-detailsRow">
-                        <div class="StandardOut-detailsLabel">STATUS</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STATUS</div>
                         <div class="StandardOut-detailsContent">
                             <i class="fa icon-job-{{ job.status }}"></i>
                             <span class="StandardOut-statusText StandardOut--capitalize">{{ job.status }}</span>
@@ -33,42 +33,42 @@
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="{{job.license_error !== null}}">
-                        <div class="StandardOut-detailsLabel">LICENSE ERROR</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">LICENSE ERROR</div>
                         <div class="StandardOut-detailsContent StandardOut--capitalize">
                             {{ job.license_error }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.started">
-                        <div class="StandardOut-detailsLabel">STARTED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STARTED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.started | longDate }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.finished">
-                        <div class="StandardOut-detailsLabel">FINISHED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">FINISHED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.finished | longDate }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.finished">
-                        <div class="StandardOut-detailsLabel">ELAPSED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">ELAPSED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.elapsed }} seconds
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.launch_type">
-                        <div class="StandardOut-detailsLabel">LAUNCH TYPE</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">LAUNCH TYPE</div>
                         <div class="StandardOut-detailsContent StandardOut--capitalize">
                             {{ job.launch_type }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="credential_name">
-                        <div class="StandardOut-detailsLabel">CREDENTIAL</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">CREDENTIAL</div>
                         <div class="StandardOut-detailsContent">
                             <a ui-sref="credentials.edit({credential_id: credential})">
                                 {{ credential_name }}
@@ -77,7 +77,7 @@
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="inventory_source_name">
-                        <div class="StandardOut-detailsLabel">GROUP</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">GROUP</div>
                         <div class="StandardOut-detailsContent">
                             <a href="{{inv_manage_group_link}}">
                                 {{ inventory_source_name }}
@@ -86,28 +86,28 @@
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="source">
-                        <div class="StandardOut-detailsLabel">SOURCE</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">SOURCE</div>
                         <div class="StandardOut-detailsContent">
                             {{ source }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="source_regions">
-                        <div class="StandardOut-detailsLabel">REGIONS</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">REGIONS</div>
                         <div class="StandardOut-detailsContent">
                             {{ source_regions }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="{{ job.overwrite !== null }}">
-                        <div class="StandardOut-detailsLabel">OVERWRITE</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">OVERWRITE</div>
                         <div class="StandardOut-detailsContent StandardOut--capitalize">
                             {{ job.overwrite }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="{{ job.overwrite_vars !== null }}">
-                        <div class="StandardOut-detailsLabel">OVERWRITE VARS</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">OVERWRITE VARS</div>
                         <div class="StandardOut-detailsContent StandardOut--capitalize">
                             {{ job.overwrite_vars }}
                         </div>
diff --git a/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html b/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
index 67507383bd..48be9fde42 100644
--- a/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
+++ b/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
@@ -15,12 +15,12 @@
                 <div class="StandardOut-details">
 
                     <div class="StandardOut-detailsRow" ng-show="job.name">
-                        <div class="StandardOut-detailsLabel">NAME</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">NAME</div>
                         <div class="StandardOut-detailsContent">{{ job.name }}</div>
                     </div>
 
                     <div class="StandardOut-detailsRow">
-                        <div class="StandardOut-detailsLabel">STATUS</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STATUS</div>
                         <div class="StandardOut-detailsContent">
                             <i class="fa icon-job-{{ job.status }}"></i>
                             <span class="StandardOut-statusText StandardOut--capitalize">{{ job.status }}</span>
@@ -28,28 +28,28 @@
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.started">
-                        <div class="StandardOut-detailsLabel">STARTED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STARTED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.started | longDate }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.finished">
-                        <div class="StandardOut-detailsLabel">FINISHED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">FINISHED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.finished | longDate }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.finished">
-                        <div class="StandardOut-detailsLabel">ELAPSED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">ELAPSED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.elapsed }} seconds
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.launch_type">
-                        <div class="StandardOut-detailsLabel">LAUNCH TYPE</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">LAUNCH TYPE</div>
                         <div class="StandardOut-detailsContent StandardOut--capitalize">
                             {{ job.launch_type }}
                         </div>
@@ -59,7 +59,7 @@
                         <div class="StandardOut-detailsLabel">EXTRA VARS</div>
                     </div>
 
-                    <div ng-show="job.extra_vars">
+                    <div class="StandardOut-extraVarsContainer" ng-show="job.extra_vars">
                         <textarea rows="6" ng-model="variables" name="variables" class="StandardOut-extraVars" id="pre-formatted-variables"></textarea>
                     </div>
 
diff --git a/awx/ui/client/src/standard-out/scm-update/standard-out-scm-update.partial.html b/awx/ui/client/src/standard-out/scm-update/standard-out-scm-update.partial.html
index 258dacee3b..65e403b252 100644
--- a/awx/ui/client/src/standard-out/scm-update/standard-out-scm-update.partial.html
+++ b/awx/ui/client/src/standard-out/scm-update/standard-out-scm-update.partial.html
@@ -16,7 +16,7 @@
                 <div class="StandardOut-details">
 
                     <div class="StandardOut-detailsRow" ng-show="project_name">
-                        <div class="StandardOut-detailsLabel">NAME</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">NAME</div>
                         <div class="StandardOut-detailsContent">
                             <a ui-sref="projects.edit({id: job.project})">
                                 {{ project_name }}
@@ -25,7 +25,7 @@
                     </div>
 
                     <div class="StandardOut-detailsRow">
-                        <div class="StandardOut-detailsLabel">STATUS</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STATUS</div>
                         <div class="StandardOut-detailsContent">
                             <i class="fa icon-job-{{ job.status }}"></i>
                             <span class="StandardOut-statusText StandardOut--capitalize">{{ job.status }}</span>
@@ -33,35 +33,35 @@
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.started">
-                        <div class="StandardOut-detailsLabel">STARTED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STARTED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.started | longDate }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.finished">
-                        <div class="StandardOut-detailsLabel">FINISHED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">FINISHED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.finished | longDate }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.finished">
-                        <div class="StandardOut-detailsLabel">ELAPSED</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">ELAPSED</div>
                         <div class="StandardOut-detailsContent">
                             {{ job.elapsed }} seconds
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="job.launch_type">
-                        <div class="StandardOut-detailsLabel">LAUNCH TYPE</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">LAUNCH TYPE</div>
                         <div class="StandardOut-detailsContent StandardOut--capitalize">
                             {{ job.launch_type }}
                         </div>
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="project_name">
-                        <div class="StandardOut-detailsLabel">PROJECT</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">PROJECT</div>
                         <div class="StandardOut-detailsContent">
                             <a ui-sref="projects.edit({id: job.project})">
                                 {{ project_name }}
@@ -70,7 +70,7 @@
                     </div>
 
                     <div class="StandardOut-detailsRow" ng-show="credential_name">
-                        <div class="StandardOut-detailsLabel">CREDENTIAL</div>
+                        <div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">CREDENTIAL</div>
                         <div class="StandardOut-detailsContent">
                             <a ui-sref="credentials.edit({credential_id: credential})">
                                 {{ credential_name }}
diff --git a/awx/ui/client/src/standard-out/standard-out.block.less b/awx/ui/client/src/standard-out/standard-out.block.less
index 3142d32496..445e332e15 100644
--- a/awx/ui/client/src/standard-out/standard-out.block.less
+++ b/awx/ui/client/src/standard-out/standard-out.block.less
@@ -1,8 +1,10 @@
 @import "../shared/branding/colors.default.less";
-@import "awx/ui/client/src/shared/layouts/one-plus-two.less";
+@import "../shared/layouts/one-plus-one.less";
 
 /** @define StandardOut */
 
+@breakpoint-md: 900px;
+
 standard-out-log {
     flex: 5;
     display: flex;
@@ -13,8 +15,9 @@ standard-out-log {
     padding: 0 20px 0 20px;
     font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
 }
+
 .StandardOut-container {
-    .OnePlusTwo-container;
+    .OnePlusOne-container(100%, @breakpoint-md);
 
     &.fullscreen {
         .StandardOut-rightPanel {
@@ -24,14 +27,18 @@ standard-out-log {
 }
 
 .StandardOut-leftPanel {
-    .OnePlusTwo-left--panel(590px);
+    .OnePlusOne-panel--left(100%, @breakpoint-md);
+    max-width: 600px;
+    @media (max-width: @breakpoint-md - 1px) {
+        max-width: 100%;
+    }
 }
 
 .StandardOut-rightPanel {
-    .OnePlusTwo-right--panel(590px);
-
-    @media (min-width: 900px) {
-        max-width: 50%;
+    .OnePlusOne-panel--right(100%, @breakpoint-md);
+    max-width: 100%;
+    @media (max-width: @breakpoint-md - 1px) {
+        padding-right: 15px;
     }
 
     .Panel {
@@ -45,7 +52,7 @@ standard-out-log {
 }
 
 .StandardOut-panelHeader {
-    .OnePlusTwo-panelHeader
+    .OnePlusOne-panelHeader
 }
 
 .StandardOut-consoleOutput {
@@ -64,11 +71,16 @@ standard-out-log {
 }
 
 .StandardOut-details {
-    .OnePlusTwo-left--details;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    padding-top: 25px;
 }
 
 .StandardOut-detailsRow {
-    .OnePlusTwo-left--detailsRow;
+    width: 100%;
+    display: flex;
+    margin: 0 -15px;
 }
 
 .StandardOut-detailsRow + .StandardOut-detailsRow {
@@ -76,15 +88,27 @@ standard-out-log {
 }
 
 .StandardOut-detailsRow--extraVars {
-    margin-bottom: 10px;
+    margin: 20px 0;
+    width: 100%;
+}
+
+.StandardOut-extraVarsContainer {
+    width: 100%;
+    padding-right: 15px;
 }
 
 .StandardOut-detailsLabel {
-    .OnePlusTwo-left--detailsLabel;
+    flex: 2.5 0 auto;
+    text-transform: uppercase;
+    color: @default-interface-txt;
 }
 
 .StandardOut-detailsContent {
-    .OnePlusTwo-left--detailsContent;
+    width: 40%;
+    flex: 1 0 auto;
+    padding: 0px 29px;
+    text-transform: none;
+    word-wrap: break-word;
 }
 
 .StandardOut-statusText {