Grids in JQM version 1.3.x is provided through pre-defined grid classes 



ui-grid-a 
ui-grid-b 
ui-grid-c 
ui-grid-d



Columns in the grid are represented by classes



ui-block-a 
ui-block-b 
ui-block-c 
ui-block-d 
ui-block-e




ui-grid-a is to have ui-block-a and ui-block-b. ui-grid-b should have three blocks, ui-block-a, ui-block-

b, and ui-block-c. And so on. 



JQuery mobile provide preset responsive grids through ui-responsive class. This feature class is ready to go if it is acceptable to have grid columns break at 560px (35em) and stacked to the bottom when screen size is less than to 560px. The example below shows how to use this preset responsive grid.


<pre class="brush: xml">
&lt;div class="ui-grid-b ui-responsive">
 &lt;div class=ui-block-a">
 &lt-- column content -->
 &lt;/div>
 &lt;div class="ui-block-b">
 &lt-- column content -->
 &lt;/div>
 &lt-- more columns -->
&lt;/div>
</pre>



<h3>
Our custom responsive grid
</h3>


Similar to what is described by the <a href="http://jquerymobile.com/demos/1.3.0/docs/intro/rwd.html" target="_blank" class="news_link" title="JQuery 

mobile 1.13.0 documentation">documentation</a>, our custom responsive grids are accomplished through CSS styles. This helps us because the preset 

does not meet our requirements.


The following is a 3-column grid.


<pre class="brush:xml">
&lt;style>
/*
When the screen is 30em and below, the column b is stacked below 
column a and column c is hidden.
*/
@media all and (max-width: 30em) {
 .home-breakpoint .ui-block-a,
 .home-breakpoint .ui-block-b {
 width: 100%;
 float:none; 
 // more styles
 }

 .home-breakpoint .ui-block-c {
 display: none;
 }
}


/*
When the screen is above 30em and below 48em, columns a and b 
are displayed beside each other, column c is hidden.
*/
@media all and (min-width: 30.1em) and (max-width:48em) {
 .home-breakpoint .ui-block-a {
 width: 50%;float: left;
 // more styles
 }

 .home-breakpoint .ui-block-b {
 width: 50%;float: left;
 // more styles
 }
 .home-breakpoint .ui-block-c {
 display:none;
 }
}


/*
When the screen is above 48em all 3 columns are shown 
beside each other.
*/

@media all and (min-width: 48.1em) {
 .home-breakpoint .ui-block-a {
 width: 40%; float: left;
 // more styles
 }

 .home-breakpoint .ui-block-b {
 width: 40%;float: left;
 // more styles
 }
 
 .home-breakpoint .ui-block-c {
 width:20%;float: left;
 // more styles
 } 
}
&lt;/style>
</pre>


Note that you may also add other styles to each columns/column elements corresponsing to each screen size.


<h3>
The corresponding JSF Page
</h3>


Below is our implementation with the preceeding styles put all together. Just replace &lt;ui:repeat /> with however you build your content. 



<pre class="brush: xml">
&lt;div class="ui-grid-b home-breakpoint">
 &lt;div class="ui-block-a" > 
 &lt;ui:repeat value="#{homeBean.today}" var="blog"> 
 &lt;div class="ui-corner-all"> 
 &lt;a href="#{blog.url}" rel="external">
 &lt;h3>#{blog.title}&lt;/h3>
 &lt;/a>
 &lt;/div> 
 &lt;/ui:repeat>
 &lt;/div>
 &lt;div class="ui-block-b"> 
 &lt;ui:repeat value="#{homeBean.recent}" var="blog"> 
 &lt;div class="ui-corner-all">
 &lt;a href="#{blog.url}" rel="external">
 &lt;h3>#{blog.title}&lt;/h3>
 &lt;/a> 
 &lt;!-- Content removed for clarity -->
 &lt;/div> 
 &lt;/ui:repeat> 
 &lt;/div>
 &lt;div class="ui-block-c" > 
 &lt;div class="popular_frame">
 &lt;ui:repeat value="#{homeBean.popular}" var="blog"> 
 &lt;!-- Content removed for clarity -->
 &lt;/ui:repeat> 
 &lt;/div> 
&lt;/div>
</pre>



Content in the columns like images and videos may also be resized corresponsing to the size of the screen. The example below shows how an image 

contained in the grid column is resized corresponding to a screen size.



<pre class="brush: xml">
&lt;style>
/*
Default image size and then resized when screen is below 800px (50em)
*/
.responsiveImage { border:0px;width:200px}
@media (max-width:50em) { 
 .responsiveImage {
 border:0px;width:120px;
 }
}
&lt;/style>
</pre>



Note that the above CSS styles may also be defined inside the home-breakpoint class defined earlier if so desired.



That's it. Good luck.

How to create a JQuery Mobile page with responsive grids