How To Do A Responsive 2 Column Grid in Jquery Mobile

How to Do A Responsive Two-Column Grid Using Jquery Mobile Framework

YOUR CSS:

<style>

@media all and (max-width: 50em) {

.my-breakpoint .ui-block-a,

.my-breakpoint .ui-block-b

{

width: 100%;

float:none;

}

}

@media all and (min-width: 75em) {

.my-breakpoint.ui-grid-a .ui-block-a { width: 49.95%; }

.my-breakpoint.ui-grid-a .ui-block-b { width: 49.925%; }

.my-breakpoint.ui-grid-a .ui-block-a { clear: left; }

}

}

</style>

YOUR HTML:

<div class="ui-grid-a my-breakpoint">

<div class="ui-block-a">

say something...</div>

<div class="ui-block-b">

say somthing</div>

</div>