Updating tests to not use pull and push

Author: rugoncalves

core/src/components/grid/test/offsets/index.html

@@ -23,37 +23,37 @@
       </ion-header>
 
       <ion-content id="content" class="grid-demo">
-        <h2 class="ion-padding-start">Push</h2>
+        <h2 class="ion-padding-start">Offset</h2>
         <ion-grid>
           <ion-row>
-            <ion-col size="auto" push="1">
-              <div>ion-col push 1</div>
+            <ion-col size="auto" offset="1">
+              <div>ion-col offset 1</div>
             </ion-col>
-            <ion-col size="auto" push="1">
-              <div>ion-col push 1</div>
+            <ion-col size="auto" offset="0">
+              <div>ion-col offset 0</div>
             </ion-col>
           </ion-row>
         </ion-grid>
 
-        <h2 class="ion-padding-start">Push and Pull</h2>
+        <h2 class="ion-padding-start">Order</h2>
         <ion-grid>
           <ion-row>
-            <ion-col size="9" push="3">
-              <div>ion-col push 3</div>
+            <ion-col size="9" order="2">
+              <div>ion-col order 2</div>
             </ion-col>
-            <ion-col size="3" pull="9">
-              <div>ion-col pull 9</div>
+            <ion-col size="3" order="1">
+              <div>ion-col order 1</div>
             </ion-col>
           </ion-row>
         </ion-grid>
 
         <ion-grid>
           <ion-row>
-            <ion-col size="3" size-md="6" push="9" push-md="6">
-              <div>ion-col size="3" size-md="6" push="9" push-md="6"</div>
+            <ion-col size="3" size-md="6" order="2" order-md="1">
+              <div>ion-col size="3" size-md="6" order="2" order-md="1"</div>
             </ion-col>
-            <ion-col size="9" size-md="6" pull="3" pull-md="6">
-              <div>ion-col size="9" size-md="6" pull="3" pull-md="6"</div>
+            <ion-col size="9" size-md="6" order="1" order-md="2">
+              <div>ion-col size="9" size-md="6" order="1" order-md="2"</div>
             </ion-col>
           </ion-row>
         </ion-grid>
@@ -70,6 +70,7 @@ <h2 class="ion-padding-start">Offset</h2>
           </ion-row>
         </ion-grid>
 
+        <h2 class="ion-padding-start">Dynamic Offset</h2>
         <ion-grid>
           <ion-row>
             <ion-col id="dynamicOffsetCol" offset="2" offset-md="5">
@@ -88,8 +89,10 @@ <h2 class="ion-padding-start">Offset</h2>
         function updateOffset() {
           var dynamicOffsetCol = document.getElementById('dynamicOffsetCol');
           var currentOffset = dynamicOffsetCol.offset;
+          var currentOffsetMd = dynamicOffsetCol.offsetMd;
           dynamicOffsetCol.offset = currentOffset === '2' ? '4' : '2';
-          console.log('Updating offset from ' + currentOffset + ' to ' + dynamicOffsetCol.offset);
+          dynamicOffsetCol.offsetMd = currentOffsetMd === '5' ? '2' : '5';
+          console.log(`Updating offset from ${currentOffset} to ${dynamicOffsetCol.offset} and offset-md from ${currentOffsetMd} to ${dynamicOffsetCol.offsetMd}`);
         }
       </script>