demo: apply responsive design to demo page

Since already use bootstrap to demo page, we could layout components
by boostrap classes to instead of using hard-coded width.

Author: walkingice

demo/demo.css

@@ -1,10 +1,17 @@
+.section {
+	margin-top: 30px;
+	margin-bottom: 30px;
+}
+
 .list {
+	border: 1px solid #000;
+	border-radius: 15px;
 	list-style: none outside none;
-	margin: 10px 0 30px;
+	margin: 10px;
+	padding: 10px;
 }
 
 .item {
-	width: 200px;
 	padding: 5px 10px;
 	margin: 5px 0;
 	border: 2px solid #444;
@@ -21,22 +28,12 @@
 /***  Extra ***/
 
 .logList {
-	margin-top: 20px;
-	width: 250px;
 	min-height: 200px;
-	padding: 5px 15px;
 	border: 5px solid #000;
 	border-radius: 15px;
 }
 
 .logList:before {
-	content: 'log';
-	padding: 0 5px;
-	position: relative;
-	top: -1.1em;
 	background-color: #FFF;
 }
 
-ul[ui-sortable] {
-	float: right;
-}

demo/demo.html

@@ -1,14 +1,14 @@
-<section ng-app="sortableApp" ng-controller="sortableController">
-  <div class="row">
-    <div class="col-md-6">
+<section ng-app="sortableApp">
+  <div ng-controller="sortableController" class="section row">
+    <div class="col-sm-offset-2 col-sm-4">
       <ul ui-sortable="sortableOptions" ng-model="list" class="list">
         <li ng-repeat="item in list" class="item">{{item.text}}</li>
       </ul>
     </div>
-    <div class="col-md-6">
+    <div class="col-sm-4">
       <ul class="list logList">
         <li ng-repeat="entry in sortingLog" class="logItem">{{entry.Text}}</li>
       </ul>
     </div>
   </div>
-</section>
+</section>