improve responsive

src/components/PageHeader/demo/standard.md

@@ -31,11 +31,11 @@ const action = (
 
 const extra = (
   <Row>
-    <Col span={12}>
+    <Col sm={24} md={12}>
       <div style={{ color: 'rgba(0, 0, 0, 0.43)' }}>状态</div>
       <div style={{ color: 'rgba(0, 0, 0, 0.85)', fontSize: 20 }}>待审批</div>
     </Col>
-    <Col span={12}>
+    <Col sm={24} md={12}>
       <div style={{ color: 'rgba(0, 0, 0, 0.43)' }}>订单金额</div>
       <div style={{ color: 'rgba(0, 0, 0, 0.85)', fontSize: 20 }}>¥ 568.08</div>
     </Col>

src/components/PageHeader/index.less

@@ -66,7 +66,7 @@
   }
 }
 
-@media screen and (max-width: @screen-md) {
+@media screen and (max-width: @screen-xl) {
   .pageHeader {
     .extraContent {
       margin-left: 44px;
@@ -74,18 +74,44 @@
   }
 }
 
-@media screen and (max-width: @screen-sm) {
+@media screen and (max-width: @screen-lg) {
   .pageHeader {
     .extraContent {
-      margin-left: 24px;
+      margin-left: 20px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .pageHeader {
+    .row {
+      display: block;
+    }
+
+    .action, .extraContent {
+      margin-left: 0;
+      text-align: left;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .pageHeader {
+    .detail {
+      display: block;
     }
   }
 }
 
 @media screen and (max-width: @screen-xs) {
   .pageHeader {
-    .extraContent {
-      margin-left: 8px;
+    .action {
+      :global {
+        .ant-btn-group, :not(.ant-btn-group) .ant-button {
+          display: block;
+          margin-bottom: 8px;
+        }
+      }
     }
   }
 }

src/routes/Profile/AdvancedProfile.js

@@ -35,11 +35,11 @@ const action = (
 
 const extra = (
   <Row>
-    <Col span={12}>
+    <Col xs={24} sm={12}>
       <div className={styles.textSecondary}>状态</div>
       <div className={styles.heading}>待审批</div>
     </Col>
-    <Col span={12}>
+    <Col xs={24} sm={12}>
       <div className={styles.textSecondary}>订单金额</div>
       <div className={styles.heading}>¥ 568.08</div>
     </Col>