Mobile fixes for features section

themes/navy/layout/index.swig

@@ -60,6 +60,13 @@
             <img class="solutions-img" src="../img/icon-ide.svg" />
             <h3>An Integrated Development Environment</h3>
             <p class="solutions-text">Write efficient, accurate code and identify issues as they appear. Develop, fix bugs, and complete testing within your IDE. </p>
+        </div>
+        <div class="solution">
+            <img class="solutions-img" src="../img/icon-chat.svg" />
+            <h3>A Community-Powered Educational Platform</h3>
+            <p class="solutions-text">Open-source resources make learning and collaboration easy. Gain proficiency, share your knowledge and find the answers you need through our educational platform.</p>
+        </div>
+        <div class="sol-features">
             <div class="solution-features">
                 <p><img src="../img/green-tick.svg">Debugger</p>
             </div>
@@ -70,11 +77,6 @@
                 <p><img src="../img/green-tick.svg">Text / code editor</p>
             </div>
         </div>
-        <div class="solution">
-            <img class="solutions-img" src="../img/icon-chat.svg" />
-            <h3>A Community-Powered Educational Platform</h3>
-            <p class="solutions-text">Open-source resources make learning and collaboration easy. Gain proficiency, share your knowledge and find the answers you need through our educational platform.</p>
-        </div>
     </div>
     <div class="sections">
         <div class="inner-header">

themes/navy/source/css/_partial/main.styl

@@ -1349,7 +1349,6 @@ footer
   max-width: 600px
   width: 50%
   float: left 
-  margin-bottom: 64px
   h3
     line-height: 25px
     font-size: 16px
@@ -1368,6 +1367,12 @@ footer
   width: 90%
   padding: 20px
 
+.sol-features
+  max-width: 600px
+  width: 50%
+  float: left
+  margin-bottom: 64px
+
 .solution-features
   float: left
   width: 45%
@@ -1410,6 +1415,10 @@ footer
 .vision-text-mobile
   display: none
 
+@media (max-width: 767px)
+  .sol-features
+    width: 100%
+
 @media (max-width: 459px)
   .site-specific-menu
     span
@@ -1438,6 +1447,14 @@ footer
     p
       font-size: 16px
       color: #939BA1
+  .solution
+    width: 100%
+  .solution-img
+    margin-left: 44%
+    margin-top: 30px
+  .solution-features
+    img
+      margin: 0 12px
   .volunteer-wrap
     margin: 70px auto 35px auto