diff --git a/UNRELEASED.md b/UNRELEASED.md
index 7a894b3042f..cbe1728827d 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -9,6 +9,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Moved icons to a separate npm package ([#686](https://github.com/Shopify/polaris-react/pull/686))
 - Added `oneHalf` and `oneThird` props to `Layout` component ([#724](https://github.com/Shopify/polaris-react/pull/724))
 - Added `helpText` prop to ActionList items ([#777](https://github.com/Shopify/polaris-react/pull/777))
+- Updated `Page` header layout so actions take up less room on small screens ([#707](https://github.com/Shopify/polaris-react/pull/707))
 
 ### Bug fixes
 
diff --git a/src/components/Page/components/Header/Header.scss b/src/components/Page/components/Header/Header.scss
index 86b9a9acaf1..7e21d9de3aa 100644
--- a/src/components/Page/components/Header/Header.scss
+++ b/src/components/Page/components/Header/Header.scss
@@ -5,8 +5,9 @@ $action-horizontal-padding: (1.5 * spacing(tight));
 }
 
 .Header-hasPagination,
-.Header-hasBreadcrumbs {
-  @include page-header-has-pagination-and-breadcrumbs;
+.Header-hasBreadcrumbs,
+.Header-hasRollup {
+  @include page-header-has-navigation;
 }
 
 .Header-hasSecondaryActions {
@@ -23,18 +24,34 @@ $action-horizontal-padding: (1.5 * spacing(tight));
 }
 
 .Header-hasRollup {
+  .SecondaryActions {
+    display: none;
+  }
+
   .IndividualActions {
     display: none;
   }
 
+  .Pagination {
+    display: none;
+  }
+
   @include page-content-when-not-partially-condensed {
     .Rollup {
       display: none;
     }
 
+    .SecondaryActions {
+      display: flex;
+    }
+
     .IndividualActions {
       display: flex;
     }
+
+    .Pagination {
+      display: flex;
+    }
   }
 }
 
@@ -44,7 +61,6 @@ $action-horizontal-padding: (1.5 * spacing(tight));
 
 .PrimaryAction {
   display: flex;
-  align-self: stretch;
   align-items: center;
 
   .MainContent > & {
@@ -61,6 +77,10 @@ $action-horizontal-padding: (1.5 * spacing(tight));
   }
 }
 
+.Rollup {
+  margin-top: spacing(extra-tight);
+}
+
 .Pagination {
   margin-left: auto;
   line-height: 1;
@@ -73,6 +93,7 @@ $action-horizontal-padding: (1.5 * spacing(tight));
 .Navigation {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   margin-bottom: spacing(extra-tight);
 }
 
@@ -81,6 +102,16 @@ $action-horizontal-padding: (1.5 * spacing(tight));
   align-items: center;
 }
 
+.TitleAndRollup {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+
+  .Rollup {
+    @include page-header-without-navigation;
+  }
+}
+
 .TitleAndActions {
   flex: 1 1 0%;
 }
diff --git a/src/components/Page/components/Header/Header.tsx b/src/components/Page/components/Header/Header.tsx
index de440f2ce35..8a95e113cc3 100644
--- a/src/components/Page/components/Header/Header.tsx
+++ b/src/components/Page/components/Header/Header.tsx
@@ -122,13 +122,14 @@ class Header extends React.PureComponent<CombinedProps, State> {
       </div>
     ) : null;
 
+    const rollupMarkup = this.renderRollupAction();
     const nonPrimaryActionsMarkup = this.renderSecondaryActions();
 
     const actionsMarkup =
       primaryAction || secondaryActions || actionGroups ? (
         <div className={styles.Actions}>
-          {primaryActionMarkup}
           {nonPrimaryActionsMarkup}
+          {primaryActionMarkup}
         </div>
       ) : null;
 
@@ -137,18 +138,22 @@ class Header extends React.PureComponent<CombinedProps, State> {
         <div className={styles.Navigation}>
           {breadcrumbMarkup}
           {paginationMarkup}
+          {breadcrumbMarkup && rollupMarkup}
         </div>
       ) : null;
 
     const titleMarkup = (
-      <div className={styles.Title}>
-        {/* Anonymous divs are here for layout purposes */}
-        <div>
-          <DisplayText size="large" element="h1">
-            {title}
-          </DisplayText>
+      <div className={styles.TitleAndRollup}>
+        <div className={styles.Title}>
+          {/* Anonymous divs are here for layout purposes */}
+          <div>
+            <DisplayText size="large" element="h1">
+              {title}
+            </DisplayText>
+          </div>
+          <div>{titleMetadata}</div>
         </div>
-        <div>{titleMetadata}</div>
+        {!breadcrumbMarkup && rollupMarkup}
       </div>
     );
 
@@ -174,11 +179,41 @@ class Header extends React.PureComponent<CombinedProps, State> {
 
   private get hasRollup() {
     const {secondaryActions = [], actionGroups = []} = this.props;
-    return secondaryActions.length + actionGroups.length > 1;
+    return secondaryActions.length + actionGroups.length >= 1;
+  }
+
+  @autobind
+  private renderRollupAction() {
+    const {rollupOpen} = this.state;
+    const {secondaryActions = [], actionGroups = []} = this.props;
+    const rollupMarkup = this.hasRollup ? (
+      <div className={styles.Rollup}>
+        <Popover
+          active={rollupOpen}
+          onClose={this.handleRollupToggle}
+          activator={
+            <Button
+              plain
+              icon="horizontalDots"
+              onClick={this.handleRollupToggle}
+            />
+          }
+        >
+          <ActionList
+            items={secondaryActions}
+            sections={actionGroups.map(convertActionGroupToActionListSection)}
+            onActionAnyItem={this.handleRollupToggle}
+          />
+        </Popover>
+      </div>
+    ) : null;
+
+    return rollupMarkup;
   }
 
+  @autobind
   private renderSecondaryActions() {
-    const {openActionGroup, rollupOpen} = this.state;
+    const {openActionGroup} = this.state;
     const {secondaryActions = [], actionGroups = []} = this.props;
 
     if (secondaryActions.length === 0 && actionGroups.length === 0) {
@@ -210,29 +245,8 @@ class Header extends React.PureComponent<CombinedProps, State> {
           ))
         : null;
 
-    const rollupMarkup = this.hasRollup ? (
-      <div className={styles.Rollup}>
-        <Popover
-          active={rollupOpen}
-          onClose={this.handleRollupToggle}
-          activator={
-            <Button disclosure onClick={this.handleRollupToggle}>
-              Actions
-            </Button>
-          }
-        >
-          <ActionList
-            items={secondaryActions}
-            sections={actionGroups.map(convertActionGroupToActionListSection)}
-            onActionAnyItem={this.handleRollupToggle}
-          />
-        </Popover>
-      </div>
-    ) : null;
-
     return (
       <div className={styles.SecondaryActions}>
-        {rollupMarkup}
         <div className={styles.IndividualActions}>
           {secondaryActionMarkup}
           {actionGroupsMarkup}
diff --git a/src/styles/shared/page.scss b/src/styles/shared/page.scss
index f785a054102..d034d384fc5 100644
--- a/src/styles/shared/page.scss
+++ b/src/styles/shared/page.scss
@@ -50,18 +50,21 @@ $actions-vertical-spacing: spacing(tight);
   }
 }
 
-@mixin page-header-has-pagination-and-breadcrumbs {
+@mixin page-header-has-navigation {
   padding-top: rem(32px);
 }
 
+@mixin page-header-without-navigation {
+  margin-top: unset;
+}
+
 @mixin page-header-has-secondary-actions {
   padding-top: rem(24px);
 }
 
 @mixin page-actions-layout {
   display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
+  justify-content: flex-start;
   align-items: center;
   margin-top: 2 * $actions-vertical-spacing;