Bootstrap Responsive Features Comparison table

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
 <body>
  
  <section class="features_table">
        <div class="container ">
        	<div class="col-sm-8 col-8 col-xs-12 no-padding">
            	<div class="features-table">
                	<ul>
                    	<h1>Features</h1>
                    	<li>Use individual PNGs (or JSON spritesheets) from any source to animate </li>
                        <li>Animate with bones or by controlling images directly</li>
                        <li>Adjust pivot points for each image</li>
                        <li>Scale and rotate any object per frame</li>
                        <li>Set the opacity of any object per frame</li>
                        <li>Basic easing features</li>
                        <li>Advanced easing curve options</li>
                        <li>Create multiple “entities” (animation sets) per file</li>
                        <li>Onion skinning to see previous and up-coming key-frames</li>
                        <li>Basic IK (inverse kinematics) support</li>
                        <li>Full IK support and IK locking (forward kinematics) </li>
                        <li>Use animations within animations to make complex scenes easily</li>
                        <li>Advanced automated control features for animations within animations</li>
                        <li>Create character variations by swapping image sets (Character maps)</li>
                        <li>Trigger and preview sound effects at any point in the timeline</li>
                        <li>Lip-sync via Papagayo</li>
                        <li> Export animations as PNG images, strips, sheets or Gif Animations </li>
                        <li>Add custom watermarks while exporting images or Gifs</li>
                        <li>Automatically import sequential images as animated sprites</li>
                        <li>Create named collision rectangles per frame</li>
                        <li>Automatically import sequential images as animated sprites</li>
                        <li> Create named action points per frame and set their angle </li>
                        <li>Create horizontal and vertical guidelines on the canvas</li>
                        <li>Lock or hide individual objects to protect or hide things as you work</li>
                        <li>Set “animated” variables for your character anywhere in the timeline</li>
                        <li>Create “Triggers” anywhere in the timeline to initiate actions in-game</li>
                        <li>Set “Tags” to any part of the timeline to designate “state changes”</li>
                        <li>Merge separate Spriter projects into one (Great for teams making games)</li>
                        <li>Auto update detection</li>
                        <li>Auto save feature</li>
                        <li>Deformable sprites (image warping)   COMING SOON</li>
                        <li>Over 260 Free Spriter Animations (for use in your games royalty free)</li>
                        
                        
                    </ul>
                </div>
            </div>
            <div class="col-sm-2 col-2 col-xs-12 no-padding">
            <div class="features-table-free">
                	<ul>
                    	<h1>Free</h1>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        <li><i class="fa fa-times"></i></li>
                        
                        
                        
                    </ul>
                </div>
            
            </div>
             <div class="col-sm-2 col-2 col-xs-12 no-padding">
             	 <div class="features-table-paid">
                	<ul>
                    	<h1>Pro</h1>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        <li><i class="fa fa-check"></i></li>
                        
                        
                        
                        
                    </ul>
                </div>
             </div>
        </div>
    
    </section>
    </body>   
</html>  

    .features_table h1{
    font-size:25px !important;
	
}
li{
    list-style:none;
    }
h1{
     font-size:21px !important;
    }    
.features-table li {
    background: #da9748 none repeat scroll 0 0;
    border-bottom: 2px solid #e5a253;
    color: #f1f1f1;
    font-size: 16px;
    padding: 15px 24px;
}
.features-table li:hover{
	background:  #e5a253;
	cursor:pointer;
	-webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}
.features-table-free li, .features-table-paid li {
    background: #efefef none repeat scroll 0 0;
    border-bottom: 2px solid #d4d4d4;
	text-align:center;
    padding: 16.4px 21px;
	cursor:pointer;
}
.features-table-free h1, .features-table-paid h1 {
    text-align: center;
}
.features-table-free li:hover, .features-table-paid li:hover {
    background: #dedede none repeat scroll 0 0;
	-webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}
.features_table h1 {
    font-size: 23px !important;
}
.features-table h1, .features-table-free h1, .features-table-paid h1 {
    background: #6b6b6b none repeat scroll 0 0;
    color: #fff;
    font-weight: 600;
    margin: 0;
    padding: 19px 21px;
    text-transform: uppercase;
}
.features-table h1 {
    border-top-left-radius: 20px;
	text-align:center;
}
.features-table-paid h1 {
    border-top-right-radius: 20px;
}
.features-table-free li {
    border-right: 2px solid #d4d4d4;
}

.fa.fa-check {
    color: #2cc14f;
}
.fa.fa-times {
    color: #BA5340;
}
.fa{
	font-size:30px;
}
.no-padding{
	padding:0;
}
ul{
	padding:0;
}

body {
  counter-reset: section;                   /* Set the section counter to 0 */
}
.features-table li::before {
  counter-increment: section;               /* Increment the section counter*/
  content: "" counter(section) ": "; /* Display the counter */
}