Responsive tasks lists, 3 layouts.

index.html

@@ -42,7 +42,8 @@
           <li class="list-group-item list-group-item-heading">
             <h1>List of tasks</h1>
           </li>
-          <li class="list-group-item list-group-item-success">
+
+          <li class="list-group-item list-group-item-success col-sm-6 col-md-4 col-lg-3">
             <div class="input-group">
               <span class="input-group-addon">
                 <input type="checkbox" checked aria-label="Task done">
@@ -51,7 +52,7 @@
             </div>
           </li>
 
-          <li class="list-group-item list-group-item-success">
+          <li class="list-group-item list-group-item-success col-sm-6 col-md-4 col-lg-3">
             <div class="input-group">
               <span class="input-group-addon">
                 <input type="checkbox" checked aria-label="Task done">
@@ -60,7 +61,7 @@
             </div>
           </li>
 
-          <li class="list-group-item list-group-item-success">
+          <li class="list-group-item list-group-item-success col-sm-6 col-md-4 col-lg-3">
             <div class="input-group">
               <span class="input-group-addon">
                 <input type="checkbox" checked aria-label="Task done">
@@ -69,7 +70,7 @@
             </div>
           </li>
 
-          <li class="list-group-item list-group-item-warning">
+          <li class="list-group-item list-group-item-warning col-sm-6 col-md-4 col-lg-3">
             <div class="input-group">
               <span class="input-group-addon">
                 <input type="checkbox" aria-label="Task not yet done">
@@ -77,6 +78,24 @@
               <a class="form-control" href="task.html">Enjoy</a>
             </div>
           </li>
+
+          <li class="list-group-item list-group-item-warning col-sm-6 col-md-4 col-lg-3">
+            <div class="input-group">
+              <span class="input-group-addon">
+                <input type="checkbox" aria-label="Task not yet done">
+              </span>
+              <a class="form-control" href="task.html">Do the dishes</a>
+            </div>
+          </li>
+
+          <li class="list-group-item list-group-item-warning col-sm-6 col-md-4 col-lg-3">
+            <div class="input-group">
+              <span class="input-group-addon">
+                <input type="checkbox" aria-label="Task not yet done">
+              </span>
+              <a class="form-control" href="task.html">Resume the MOOC</a>
+            </div>
+          </li>
         </ul>
     </div>