diff --git a/src/index.htm b/src/index.htm
index 074696b..c52efeb 100644
--- a/src/index.htm
+++ b/src/index.htm
@@ -142,69 +142,69 @@
       <p class="text-lg">This course is based on our experience in private informal sessions and the <a href="https://write.snipettemag.com" class="text-blue-900 underline">Snipette Writers' Programme</a>. We understand that no two peoples' ideas or problems or finished products will be identical; hence a lot of how the course works depends on your personal needs. However, here's what will remain constant:</p>
 
       <ul class="m-4 text-lg">
-        <li class="flex">
-          <div class="w-1/2 p-4">
+        <li class="flex flex-col md:flex-row items-center md:items-stretch">
+          <div class="py-4 w-8 order-1 md:order-2">
+            <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">1</p>
+            <div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
+          </div>
+          <div class="md:w-1/2 p-4 order-2 md:order-1">
             <img width=640 height=480 />
           </div>
-          <div class="py-4 w-8">
-            <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">1</p>
-            <div class="w-0 h-full border border-blue-700 mx-auto"></div>
-          </div>
-          <div class="w-1/2 pl-4 flex items-center">
+          <div class="md:w-1/2 md:pl-4 flex items-center order-3">
             <p>Your workplace will begin as a Google Docs sheet. This is where you will be brainstorming ideas and figuring out what area you want to research. In the meantime, you will also be in touch with the team over email.</p>
           </div>
         </li>
-        <li class="flex flex-row-reverse">
-          <div class="w-1/2 p-4">
+        <li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
+          <div class="py-4 w-8 order-1 md:order-2">
+            <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">2</p>
+            <div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
+          </div>
+          <div class="md:w-1/2 p-4 order-2 md:order-1">
             <img width=640 height=480 />
           </div>
-          <div class="py-4 w-8">
-            <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">2</p>
-            <div class="w-0 h-full border border-blue-700 mx-auto"></div>
-          </div>
-          <div class="w-1/2 pl-4 flex items-center">
+          <div class="md:w-1/2 md:pr-4 flex items-center order-3">
             <p>Once your topic is chosen, we will work together on finding links, resources, and publicly available datasets. Of course, all details and final choices will be up to you.</</p>
           </div>
         </li>
-        <li class="flex">
-          <div class="w-1/2 p-4">
+        <li class="flex flex-col md:flex-row items-center md:items-stretch">
+          <div class="py-4 w-8 order-1 md:order-2">
+            <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">3</p>
+            <div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
+          </div>
+          <div class="md:w-1/2 p-4 order-2 md:order-1">
             <img width=640 height=480 />
           </div>
-          <div class="py-4 w-8">
-            <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">3</p>
-            <div class="w-0 h-full border border-blue-700 mx-auto"></div>
-          </div>
-          <div class="w-1/2 pl-4 flex items-center">
+          <div class="md:w-1/2 md:pl-4 flex items-center order-3">
             <p>You will then switch to a Google Colab notebook, where you will document your project, data analytics, and visualization with state of the art Python-based data analysis tools.</p>
           </div>
         </li>
-        <li class="flex flex-row-reverse">
-          <div class="w-1/2 p-4">
+        <li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
+          <div class="py-4 w-8 order-1 md:order-2">
+            <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">4</p>
+            <div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
+          </div>
+          <div class="md:w-1/2 p-4 order-2 md:order-1">
             <img width=640 height=480 />
           </div>
-          <div class="py-4 w-8">
-            <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">4</p>
-            <div class="w-0 h-full border border-blue-700 mx-auto"></div>
-          </div>
-          <div class="w-1/2 pl-4 flex items-center">
+          <div class="md:w-1/2 md:pl-4 flex items-center order-3">
             <p>We will guide you in constructing a compelling data-based story based on your analyses.</p>
           </div>
         </li>
-        <li class="flex">
-          <div class="w-1/2 p-4">
+        <li class="flex flex-col md:flex-row items-center md:items-stretch">
+          <div class="py-4 w-8 order-1 md:order-2">
+            <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">5</p>
+            <div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
+          </div>
+          <div class="md:w-1/2 p-4 order-2 md:order-1">
             <img width=640 height=480 />
           </div>
-          <div class="py-4 w-8">
-            <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">5</p>
-            <div class="w-0 h-full border border-blue-700 mx-auto"></div>
-          </div>
-          <div class="w-1/2 pl-4 flex items-center">
+          <div class="md:w-1/2 pl-4 flex items-center order-3">
             <p>Once your conclusions are ready, you will move back to Google Docs to present your findings.</p>
           </div>
         </li>
         <li class="flex flex-col items-center">
           <div class="py-4 w-8">
-            <div class="w-0 h-full border border-blue-700 mx-auto"></div>
+            <div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
             <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">6</p>
           </div>
           <p class="text-lg mt-4">