Plan select resposive

Créditos http://bootsnipp.com/outsideMyBox original source http://bootsnipp.com/snippets/featured/responsive-pricing-table

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-offset-4 col-sm-8">
            <div class="row">
            
                <div class="col-xs-4 my_planHeader my_plan4">
                    <div class="my_planTitle">Impressora de NFC-e</div>
                    <div class="my_planPrice">R$ 180,00</div>
                    <div class="my_planDuration"> </div>                   
                </div>
                
                 <div class="col-xs-4 my_planHeader my_plan1">
                    <div class="my_planTitle">Impressora de Etiqueta</div>
                    <div class="my_planPrice">R$ 180,00</div>
                    <div class="my_planDuration"> </div>                   
                </div>
                
                <div class="col-xs-4 my_planHeader my_plan2">
                    <div class="my_planTitle">Aparelho SAT</div>
                    <div class="my_planPrice">R$ 280,00</div>
                    <h2>            
                    </h2>
                    <div class="my_planDuration"></div>
                
                   
                </div>
                <div class="col-xs-4 my_planHeader my_plan3">
                    <div class="my_planTitle">Aparelho MF-e</div>
                    <P>
                    
                    </P>
                    <div class="my_planPrice">R$ 280,00</div>
                    <p>
                    
                    </p>
                    <div class="my_planDuration"></div>
                    
                </div>
            </div>
        </div>
    </div>
 
       
                </div>
            </div>
        </div>
    </div>
   
 ...

CSS

/* Use a wide full screen for small screens like tablets. */
@media (min-width: 800px) and (max-width:1000px) {
    .container {
		width: initial;
        padding-left: 0em;
        padding-right: 3em;        
	}
}

/* --- Plans ---------------------------- */

.my_planHeader {
    text-align: center;
    color: white;
    padding-top:0.2em;
    padding-bottom:0.2em;
}
.my_planTitle {
    font-size:2em;
    font-weight: bold;
}
.my_planPrice {
    font-size:1.4em;
    font-weight: bold;    
}
.my_planDuration {
    margin-top: -0.6em;
}

@media (max-width: 768px) {
    .my_planTitle {
        font-size:small;
    }    
}

/* --- Features ------------------------- */

.my_feature {
    line-height:2.8em;   
}

@media (max-width: 768px) {
    .my_feature {
        text-align: center
    }
 }

.my_featureRow {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    border: 0.1em solid rgb(163, 163, 163);
}    

/* --- Plan 1 --------------------------- */
.my_plan1 {
    background: yellow;
}

.my_planHeader.my_plan1 a {
    background: green;
    color:green;
}

.my_planHeader.my_plan1 {
    background: green;
    border-bottom: green;
}

/* --- Plan 2 --------------------------- */
.my_plan2 {
    background: blue;
}

.my_planHeader.my_plan2 a {
    background: blue;
    color:blue;
}

.my_planHeader.my_plan2 {
    background: blue;
    border-bottom: blue;
}


/* --- Plan 3 --------------------------- */
.my_plan3 {
    background: rgb(254,235,212);
}

.my_planHeader.my_plan3 a {
    background: rgb(199, 127, 40);
    color:white;
}

.my_planHeader.my_plan3 {
    background: rgb(253, 161, 49);
    border-bottom: thick solid rgb(199, 127, 40);
}

/* --- Plan 4 --------------------------- */
.my_plan4 {
    background: red;
}

.my_planHeader.my_plan4 a {
    background: red;
    color:red;
}

.my_planHeader.my_plan4 {
    background: red;
    border-bottom: red;
}

/* --- FIm Plan 4 --------------------------- */

.my_planFeature {
    text-align: center;
   ...