opencart 2.3. How to swap the location of blocks in the mobile version in the product card?

Question

Layout

By default, in Opencart 2.3, the product card in the mobile version looks like this (from top to bottom): product photo, then comes its description, and only then the buy button. As a result, to get to the purchase, you have to "scroll the screen down for a long time." It is necessary that the buy button was before the description.
There are two blocks: col-sm-8 (photo and product description) and col-sm-4 (price and buy button)
And when you switch to mobile, col-sm-4 loses float: left; Well, it goes down accordingly.
How to insert it between a block with a photo and a block with a description? Only with a script or can you just use CSS (if so, how)?

Answer 1

1. col-sm-4 rearrange above block col-sm-8
   
2. for block col-sm-4 add class float-md-right