diff --git a/src/index.webpack b/src/index.webpack
index c34d68a..a83c42e 100644
--- a/src/index.webpack
+++ b/src/index.webpack
@@ -69,7 +69,7 @@
 
     <div id="main-content" class="container-fluid Paired">
     <div class="row">
-      <div class="col-md-3 col-lg-2 col-sm-4 col-no-padding">
+      <div class="col-md-3 col-lg-2 col-xs-4 col-no-padding">
         <div class="panel panel-default">
           <div class="panel-heading">
             <h4 class="panel-title">
@@ -83,7 +83,7 @@
             <div id="handContent">
               <div class="row" ng-cloak>
 
-                <div class="col-md-2 col-sm-3 col-no-padding " ng-repeat="r in rc.cards|orderBy:'key'" ng-show="rc.isAvailable(r)">
+                <div class="col-md-2 col-xs-3 col-no-padding " ng-repeat="r in rc.cards|orderBy:'key'" ng-show="rc.isAvailable(r)">
                   <span  ng-show="rc.isAvailable(r)"
                     id="{{r.key}}"
                     class="{{r.key}} card cards-store {{ r.state.interesting ? 'blink' : '' }} {{r.color}} {{rc.isAvailable(r) ? ' ui-draggable': 'empty'}}"
@@ -105,10 +105,10 @@
         </div>
       </div>
 
-      <div id="column-lab" class="col-md-6 col-sm-8 col-lg-7 col-no-padding-xs" ng-controller="StatsController as lc">
+      <div id="column-lab" class="col-md-6 col-xs-8 col-lg-7 col-no-padding-xs" ng-controller="StatsController as lc">
 
         <div class="row status" ng-cloak>
-          <div class="col-sm-12 text-center col-no-padding-xs">
+          <div class="col-xs-12 text-center col-no-padding-xs">
 
             <div class="{{lc.lab.state.score<0?'bg-danger':''}} animate-increase animate-decrease" ><strong>Score</strong><br>{{ lc.lab.state.score | niceNumber }}</div>
             <div class="update-value " ng-model="lc.lab.state.score" cfs-score-change id="update-data"></div>
@@ -131,7 +131,7 @@
                 >
                 <div class="main-line card-line" id="lastCards">
                     <div class="row" >
-                        <div class="col-md-1 col-sm-1 col-no-padding add-from-top" ng-repeat="r in dc.lastCards | limitTo: -10" ng-cloak>
+                        <div class="col-md-1 col-xs-1 col-no-padding add-from-top" ng-repeat="r in dc.lastCards | limitTo: -10" ng-cloak>
                             <span
                                 class="{{r.key}} card {{r.color}}"
                                 data-cards="{{r.key}}"
@@ -145,9 +145,9 @@
                 <div class=""><strong>Incorrect cards:</strong><br></div>
                 <div class="side-line card-line short-lines-nup"  id="incorrectCards">
                     <div class="row">
-                        <div class="col-md-1 col-sm-1 col-no-padding" ng-repeat="rr in dc.incorrectCards | limitTo: -10" ng-cloak>
+                        <div class="col-md-1 col-xs-1 col-no-padding" ng-repeat="rr in dc.incorrectCards | limitTo: -10" ng-cloak>
                             <div class="row">
-                                <div ng-repeat="r in rr| limitTo: -7" class="col-md-12  col-no-padding add-from-right ">
+                                <div ng-repeat="r in rr| limitTo: -7" class="col-xs-12  col-no-padding add-from-right ">
                                         <span
                                             class="{{r.key}} card {{r.color}}"
                                             data-cards="{{r.key}}"
@@ -194,7 +194,7 @@
 
       </div>
 
-      <div class="col-md-3 col-lg-2 col-sm-6  col-no-padding">
+      <div class="col-md-3 col-lg-2 col-xs-6  col-no-padding">
         <div class="panel panel-default">
           <div class="panel-heading">
             <h4 class="panel-title">