Hi,

For that, you need to create two templates, One desired for the desktop and the other one desired for mobile. Next what you have to do is do the styling for both templates using media query. Choose the screen width to show the mobile screen view and using the class or id for the top tag of mobile view and desktop view, give css as follows.

@media (max-width: 'give the screen width') {
  'selector for mobile template' {
    display: block;
  }
  'selector for desktop template' {
    display: none;
  }
}

Please note that first you need to give 'd-none' in mobile template to hide it in normal screen.

Or you can also achieve this using bootstap classes.

Screen size Class
Hidden on all                 .d-none
Hidden only on xs          .d-none .d-sm-block
Hidden only on sm         .d-sm-none .d-md-block
Hidden only on md         .d-md-none .d-lg-block
Hidden only on lg            .d-lg-none .d-xl-block
Hidden only on xl            .d-xl-none .d-xxl-block
Hidden only on xxl          .d-xxl-none
Visible on all                   .d-block
Visible only on xs           .d-block .d-sm-none
Visible only on sm          .d-none .d-sm-block .d-md-none
Visible only on md          .d-none .d-md-block .d-lg-none
Visible only on lg            .d-none .d-lg-block .d-xl-none
Visible only on xl            .d-none .d-xl-block .d-xxl-none
Visible only on xxl          .d-none .d-xxl-block

Regards