Can anyone please tell me how I can make Layout 4 work more responsively in smartphones? I want it to display in the following way....

DESKTOP
Row 1: icon-image - content | icon-image - content | icon-image - content
Row 2 : content - icon-image | content - icon-image | content - icon-image

TABLET
Row 1 : icon-image - content | icon-image - content
Row 2 : content - icon-image | content - icon-image
Row 3 : icon-image - content | icon-image - content

SMARTPHONE
Row 1 : icon-image - content
Row 2 : content - icon-image
Row 3 : icon-image - content
Row 4 : content - icon-image
Row 5 : icon-image - content
Row 6 : content - icon-image

It already works like this for desktop and tablet but for smartphone it's just like the tablet layout but far too squashed and distorted, it's even like this in the JS University II template demo which uses this extension.

Many thanks