The mobi:smallView component and mobi:largeView component can be used together to display different content on the page, depending on the screen size of the user. When a mobile device with a small screen such as a smartphone is detected, the contents of mobi:smallView will be loaded, otherwise it is assumed that the user is viewing the page on a desktop computer or tablet, in which case the contents of mobi:largeView will be loaded instead.

    <mobi:smallView>
       <!-- group of components
          to be displayed
          in small screens -->
    </mobi:smallView>

    <mobi:largeView>
       <!-- group of components
         to be displayed
         in big screens -->
    </mobi:largeView>