diff --git a/awx/ui_next/src/components/DataListCheck/DataListCheck.jsx b/awx/ui_next/src/components/DataListCheck/DataListCheck.jsx
index a6f0b5503c..511cc8d9a8 100644
--- a/awx/ui_next/src/components/DataListCheck/DataListCheck.jsx
+++ b/awx/ui_next/src/components/DataListCheck/DataListCheck.jsx
@@ -2,8 +2,13 @@ import { DataListCheck as PFDataListCheck } from '@patternfly/react-core';
 import styled from 'styled-components';
 
 export default styled(PFDataListCheck)`
-  .pf-c-data-list__check {
-    display: flex;
-    align-items: center;
+  padding-top: 18px;
+  @media screen and (min-width: 768px) {
+    padding-top: 16px;
+    justify-content: ${props => (props.lastcolumn ? 'flex-end' : 'inherit')};
+    .pf-c-data-list__check {
+      display: flex;
+      align-items: center;
+    }
   }
 `;
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index ec0f94223f..5d54b60116 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import {
   DataListItem,
   DataListItemRow,
-  DataListItemCells,
+  DataListItemCells as PFDataListItemCells,
   Tooltip,
   Button as PFButton,
 } from '@patternfly/react-core';
@@ -27,6 +27,32 @@ const StyledButton = styled(PFButton)`
     color: white;
   }
 `;
+const DataListItemCells = styled(PFDataListItemCells)`
+  display: flex;
+  @media screen and (max-width: 768px) {
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+`;
+
+const LeftDataListCell = styled(DataListCell)`
+  @media screen and (max-width: 768px) {
+    && {
+      padding-bottom: 16px;
+      flex: 1 1 100%;
+    }
+  }
+`;
+const RightDataListCell = styled(DataListCell)`
+  @media screen and (max-width: 768px) {
+    && {
+      padding-top: 0px;
+      flex: 0 0 33%;
+      padding-right: 20px;
+    }
+  }
+`;
+
 class TemplateListItem extends Component {
   render() {
     const { i18n, template, isSelected, onSelect } = this.props;
@@ -46,21 +72,34 @@ class TemplateListItem extends Component {
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell key="divider">
+              <LeftDataListCell key="divider">
                 <VerticalSeparator />
                 <span>
                   <Link to={`/templates/${template.type}/${template.id}`}>
                     <b>{template.name}</b>
                   </Link>
                 </span>
-              </DataListCell>,
-              <DataListCell key="type">
+              </LeftDataListCell>,
+              <RightDataListCell
+                css="padding-left: 40px;"
+                righthalf="true"
+                key="type"
+              >
                 {toTitleCase(template.type)}
-              </DataListCell>,
-              <DataListCell key="sparkline">
+              </RightDataListCell>,
+              <RightDataListCell
+                css="flex: 1;"
+                righthalf="true"
+                key="sparkline"
+              >
                 <Sparkline jobs={template.summary_fields.recent_jobs} />
-              </DataListCell>,
-              <DataListCell lastcolumn="true" key="launch">
+              </RightDataListCell>,
+              <RightDataListCell
+                css="max-width: 40px;"
+                righthalf="true"
+                lastcolumn="true"
+                key="launch"
+              >
                 {canLaunch && template.type === 'job_template' && (
                   <Tooltip content={i18n._(t`Launch`)} position="top">
                     <LaunchButton resource={template}>
@@ -72,7 +111,7 @@ class TemplateListItem extends Component {
                     </LaunchButton>
                   </Tooltip>
                 )}
-              </DataListCell>,
+              </RightDataListCell>,
             ]}
           />
         </DataListItemRow>