Как упорядочить колонки в шаблоне OpenCart?

Question

[Артём]

В стандартном шаблоне OpenCart в настольной версии по очереди отображаются - левая, центральная и правая колонка. В мобильной версии порядок колонок такой же, сначала вверху отображается боковая колонка, ниже центральная и еще ниже снова боковая. Как сделать, чтобы в мобильной версии в самом верху под хедером отображалась центральная колонка, а ниже за ней следовали боковые?

Answer 1

[iamDiNGo]

<?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; ?>

Что в обычной, что в мобильной он всегда будет таким, только если вы его не поменяете местами средствами JS при определённом размере экрана. Если вам не особо важна информация в левой колонке можно её скрыть классом "hidden-xs".
Через JS это будет выглядеть примерно так:

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

Подключаем JS при определённых размерах экрана.
В самом JS файле будет такой код:

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