How to arrange columns in an OpenCart template?

Question

opencart

In the standard OpenCart template in the desktop version, the left, center and right columns are displayed in turn. In the mobile version, the order of the columns is the same, first the side column is displayed at the top, below the central one and even lower again the side column. How can I make the central column appear at the very top under the header in the mobile version, and the side columns follow it below?

Answer 1

<?php echo $header; ?>
<div class="container">
  <div class="row">

    <?php echo $column_left; ?>

    <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>">
       <?php echo $content_top; ?>
       <?php echo $content_bottom; ?>
    </div>

    <?php echo $column_right; ?></div>

</div>
<?php echo $footer; ?>

Both in normal and in mobile, it will always be like this, only if you don’t swap it using JS at a certain screen size. If you don't really care about the information in the left column, you can hide it with the "hidden-xs" class.
Through JS it would look something like this:

<script type="text/javascript">
{
if (screen.width < 480) document.write ('<script type="text/javascript" src="catalog/view/javascript/headjs.js" ></script>');
}
</script>

We connect JS at certain screen sizes.
The JS file will contain the following code:

window.onload = function(){
    var b1 = document.getElementById("column-left");
    var b2 = document.getElementById("content");
    b1.parentNode.insertBefore(b2, b1);
}