responsive design help needed

[coolman7]

I need some help to implement responsive design for landscape and portrait schemes. Currently I'm doing this manually every time I draw a page, I check if it is in portrait I use following schema:

<div class="ui-grid-a">
<div class="ui-block-a">content1</div>
<div class="ui-block-b">content2</div>
<div class="ui-block-a">content3</div>
<div class="ui-block-b">content4</div>
<div class="ui-block-a">content5</div>
<div class="ui-block-b">content6</div>
</div>

If it is in landscape I use this schema:

<div class="ui-grid-b">
<div class="ui-block-a">content1</div>
<div class="ui-block-b">content2</div>
<div class="ui-block-c">content3</div>
<div class="ui-block-a">content4</div>
<div class="ui-block-b">content5</div>
<div class="ui-block-c">content6</div>
</div>

But If I change the orientation after page was drawn, schema does not change.

Think about a view result has 30 rows. If device was in portrait mode when my_module_view_list_row() function called, it will print 15 x 2 scheme, or if it was in landscape, it will print 10 x 3 schema. But If I change the orientation, my_module_view_list_row() function will not be called again, and I have no chance to redraw it to correct schema to new orientation.

So I need another way that adapts itself to the current orientation automatically. I researched jquery mobile grids and I found breakpoint classes. But I don't figure out how to implement it. I need help, example project code or advice how to implement it to drupalgap.

Thanks

[signalpoint]

@coolman7 jQuery Mobile Grid support for Views Render Arrays has been added for DrupalGap: http://docs.drupalgap.org/7/Views/Displaying_a_View/Views_Render_Array

As for redrawing it upon device change, use hook_deviceready() to attach an orientation change listener, then programmatically refresh the View with the listener.