ui-responsive grid wraps the columns into rows jQuery mobile - css

Question

Trying to create a responsive grid which supports mobile screens. When using jQuery mobile ui-responsive grid, the column wraps and behaves like rows(one below one) even-though the first row has space accommodate second column. If I test the same in Tablet size screens, things works fine. Where I am wrong or this is how it behaves ?
The code I used is
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<a href="#" id="link_frgt_pswd" data-inline="true" >Forgot Password ?</a>
</div>
<div class="ui-block-b">
Login
</div>
</div>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<h3>For Member </h3>
</div>
<div class="ui-block-b">
<a href="#" id="link_unlock_acc" data-inline="true" >Unlock Account</a>
</div>
</div>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<h3>For Provider </h3>
</div>
<div class="ui-block-b">
Register
</div>
</div>
I even tried to reduce the width of columns with css .ui-grid-a .ui-block-a { width: 30% } .ui-grid-a .ui-block-b { width: 30% }. it reduces the width but still ui-block-b remains in the next line.

Answer 1

The ui-responsive class in jQM adds a CSS media query for a max-width of 560px. So any time the screen is less than 560px, the columns are stacked. If you want your own custom break point, instead of ui-responsive, make your own class name and set your desired break point.
For example, if you want the stacking to happen only when screen width is below 300px:
<div class="ui-grid-a my-breakpoint">...</div>
#media all and (max-width: 300px) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float: none;
}
}
DEMO
You can also look at this demo from the jQM site:
http://demos.jquerymobile.com/1.4.5/grids-custom-responsive/