bootstrap mobile first layout issue - html

Question

Please check my demo .I have been trying to implement this please hover above any plan block with different grid size i have some how managed to make it work all the grid sizes except col-xg(<768px).Here on hover the div breaks and shows irregular behavior.Below i have added the sample how i want block to render <768px grid and on hover block has to change to blackish color
This is the Second Issue uneven height
I am trying to build a page from the scratch and so please be kind enough to point out my mistakes
FIDDLE
HTML
<div id="Container_Plans">
<div class="rows">
<div class="col-lg-2 col-md-2 col-sm-2 ">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 ">
<div class="products_Container">
<div class="Product_Plan">
<span class="PlanName">
#01
</span>
</div>
<div class="Product_Feature">
<span class="Feature_Content">
<h2>Compact Plan</h2>
<p><span class="break">DDNS Feature for </span>remote viewing </p>
<div>
# RS 10000 /-
</div>
free Dns Subscription for a year
</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="products_Container">
<div class="Product_Plan">
<span class="PlanName">
#02
</span>
</div>
<div class="Product_Feature">
<span class="Feature_Content">
<h2>Regular Plan</h2>
<p><span class="break">DDNS Feature for </span>remote viewing </p>
<div>
# RS 21000 /-
</div>
free Dns Subscription for a year
</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 ">
<div class="products_Container">
<div class="Product_Plan">
<span class="PlanName">
#03
</span>
</div>
<div class="Product_Feature">
<span class="Feature_Content">
<h2>Performance Plan</h2>
<p><span class="break">DDNS Feature for </span>remote viewing </p>
<div>
# RS 45000 /-
</div>
free Dns Subscription for a year
</span>
</div>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
</div>
</div>

Answer 1

It looks like the background changes are being determined on an on-hover css rule for .products_Container. Try setting the rule for its parent, col-lg-3 col-md-3 col-sm-3 col-xs-12, and give the parent the desired on-hover background color.
Does this achieve what you are attempting to accomplishing?
http://jsfiddle.net/sYJKE/2/embedded/result/

Answer 2

You need a clearfix on the products_Containers. The floated elements inside aren't filling their container element, which the clearfix will take care of. Here's Nicolas Gallagher's lovely clearfix (http://nicolasgallagher.com/micro-clearfix-hack/):
.products_Container:before,
.products_Container:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.products_Container:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.products_Container {
*zoom: 1;
}
http://jsfiddle.net/EG7v9/2/
Regarding the height difference, the fast and dirty way to fix that is the make the h2 tags the same height no matter what. You can drop a break <br> inside the h2 to split the plan type and the word plan onto two lines:
<h2>Regular <br>Plan</h2>
Just do that for each of the plan h2s.