You can configure your pricing table using the grid system in order to make it responsive for small devices.
Using the "Most Popular" css class.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
<div class="pricing-table"> <div class="col-md-3"> <div class="plan"> <h3> Enterprise<span>$59</span></h3> <a href="#" class="btn btn-lg btn-primary">Sign up</a> <ul> <li><strong>10GB</strong> Disk Space</li> <li><strong>100GB</strong> Monthly Bandwidth</li> <li><strong>20</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> <div class="col-md-3 center"> <div class="plan most-popular"> <div class="plan-ribbon-wrapper"> <div class="plan-ribbon"> Popular</div> </div> <h3> Professional<span>$29</span></h3> <a href="#" class="btn btn-lg btn-primary">Sign up</a> <ul> <li><strong>5GB</strong> Disk Space</li> <li><strong>50GB</strong> Monthly Bandwidth</li> <li><strong>10</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> <div class="col-md-3"> <div class="plan"> <h3> Standard<span>$17</span></h3> <a href="#" class="btn btn-lg btn-primary">Sign up</a> <ul> <li><strong>3GB</strong> Disk Space</li> <li><strong>25GB</strong> Monthly Bandwidth</li> <li><strong>5</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> <div class="col-md-3"> <div class="plan"> <h3> Basic<span>$9</span></h3> <a href="#" class="btn btn-lg btn-primary">Sign up</a> <ul> <li><strong>1GB</strong> Disk Space</li> <li><strong>10GB</strong> Monthly Bandwidth</li> <li><strong>2</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
<div class="pricing-table"> <div class="col-md-4"> <div class="plan"> <h3> Enterprise<span>$59</span></h3> <a href="#" class="btn btn-lg btn-primary">Sign up</a> <ul> <li><strong>10GB</strong> Disk Space</li> <li><strong>100GB</strong> Monthly Bandwidth</li> <li><strong>20</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> <div class="col-md-4"> <div class="plan"> <h3> Professional<span>$29</span></h3> <a href="#" class="btn btn-lg btn-primary">Sign up</a> <ul> <li><strong>5GB</strong> Disk Space</li> <li><strong>50GB</strong> Monthly Bandwidth</li> <li><strong>10</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> <div class="col-md-4"> <div class="plan"> <h3> Standard<span>$17</span></h3> <a href="#" class="btn btn-lg btn-primary">Sign up</a> <ul> <li><strong>3GB</strong> Disk Space</li> <li><strong>25GB</strong> Monthly Bandwidth</li> <li><strong>5</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> </div>