how to modify product template for mobile only

Store Design
1

Question:

how to modify product template for mobile only or putting the different product template on mobile view and desktop view

Long story short, I’m just trying to make

‘.product-single__title .product_single_price .review-widget’ to appear before .product-img-box on mobile view only.

since Product template is HTML instead of CSS, I know that ‘@media only screen’ won’t work for HTML, and I’ve tried the following code in my ‘timber.scss.liquid’ but nothing has changed, and if there’s a way to have ‘@media only screen’ in HTML version, please tell me.

only screen and (min-device-width: 320px) and (max-device-width: 480px) {
 	.product-single__title .product_single_price .review-widget 
 	.grid__item.wide--one-half.post-large--one-half.large--one-half.product-img-box{
 	display: inline;
    }
}
2

@Kuroya

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

Please share your site URL,
So I will check and provide a solution here.