Adjust layout for 12 column grid for Hub details and order cycle info plus adjust CSS to allow for different break points

app/assets/stylesheets/darkswarm/shop.css.sass

@@ -31,35 +31,31 @@
         location, location + small
           display: block
 
-      #distributor_title
-        float: left
-        display: block
-        min-width: 350px
+      #distributor_title h3
+        margin-top: 0
+        @media all and (max-width: 768px)
+          margin-bottom: 8px
+        
 
       ordercycle
-        @media all and (max-width: 768px)
+        @media all and (max-width: 640px)
           float: left
           clear: left
-          padding-bottom: 12px
-        display: block
+          padding: 12px 10px
+          width: 100%
+          margin-top: 10px
+          background: #e5e5e5
         float: right
         form.custom 
-          //width: 400px
           text-align: right
-          margin-right: 1em
-          @media all and (max-width: 768px)
-            padding-left: 1em
-            padding-top: 1em
           & > strong
             line-height: 2.5
             font-size: 1.29em
             padding-right: 14px
             @media all and (max-width: 768px)
-              font-size: 1.2em
-          select
+          select            
             width: inherit
             display: inline-block
-            vackground: transparent
             border-width: 1px
             border-color: #999
             color: #666
@@ -67,13 +63,18 @@
             margin-bottom: 0
             padding: 8px 20px 8px 12px
             @media all and (max-width: 768px)
-              font-size: 1.2em
-              // width: 180px
+              font-size: 0.875em
         closing
+          @media all and (max-width: 768px)
+            font-size: 1.2em
+            padding-bottom: 10px
           color: black
           font-size: 1.5em
           display: block
-          padding-bottom: 20px
+          padding-bottom: 12px
+        span
+          @media all and (max-width: 768px)
+            font-size: 0.875em
 
   products
     display: block

app/views/shopping_shared/_details.html.haml

@@ -1,13 +1,14 @@
 %navigation
   %distributor.details.row
-    #distributor_title
-      - if current_distributor.logo.exists?
-        %img.left{src: current_distributor.logo.url(:thumb)}
-      %h3
-        = current_distributor.name
-      %location= current_distributor.address.city
-      / Will this needs to be a drop-down to choose either pick-up point or delivery once shipping methods are implemented
-
-    = render partial: "shopping_shared/order_cycles"
+    .small-12.medium-6.large-6.columns
+      #distributor_title
+        - if current_distributor.logo.exists?
+          %img.left{src: current_distributor.logo.url(:thumb)}
+        %h3
+          = current_distributor.name
+        %location= current_distributor.address.city
+        / Will this needs to be a drop-down to choose either pick-up point or delivery once shipping methods are implemented
+    .small-12.medium-6.large-6.columns
+      = render partial: "shopping_shared/order_cycles"
 
 = render partial: "shopping_shared/tabs"