As already mentioned there are several possible ways to try. As commented by Igor Mesterovic, you could create several pages depending on the device type. You can use the navigation profiles and there css style helpers for layout grids that could also help you to manipulate the grid size for different screen size. If you would like to have one column only on mobile device, you can force that by adding the class col-xs-12 to your layout grid columns. Read more here https://getbootstrap.com/docs/3.3/examples/grid/
You can also use the .profile-X class on body instead of media query hell
make another form for mobile and on setting runtime put the workflow like this
Usually you would create columns with the layout grid.
Since you define the columns on the TemplateGrid you can force this behaviour (if you only want 1 instance of that page, independent of device type) by using media queries in CSS.
e.g. if screen width is smaller than 768 set the width of the templategrid item to 100%
@media only screen and (max-width: 768px) {
/* For mobile phones: */
}