I am using 2 column left in home page. It is a cms page. In responsive i need to load as

<div class="sidebar sidebar-main"></div>
<div class="column main"></div>
  • this class by default loaded.What you want?
    – Amit Bera
    Commented Aug 17, 2018 at 9:29
  • By default it is loaded as <div class="column main"></div> <div class="sidebar sidebar-main"></div> this i need as given in my question
    – Arjun
    Commented Aug 17, 2018 at 9:58

2 Answers 2


You can change the order of these divs by overriding the following file:


I have managed to change the order by modifying the code of above file. Check the below code:

<?xml version="1.0"?>
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    <referenceContainer name="columns">
        <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" before="main">
            <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
        <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
            <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>

This will take effect on mobile and desktop both views. Afterwards you can change the css according to your requirement.


I realise this is an old question but thought I'd add my approach for anyone that might come across the same issue.

If I understood the question correctly, you would like to swap the order of the divs around for responsive design (mobile for example). This could be done with CSS Flex-box

Starting HTML:

<div class="surrounding-div">
   <div class="column main"></div>
   <div class="sidebar sidebar-main"></div>

Add the following CSS:

@media (max-width: 767px) {
    .surrounding-div {
        display: flex;
        flex-direction: column;

   .sidebar-main {
     order: 0; // places this div as the first child of the flex parent

Mobile would now render as:

<div class="surrounding-div">
   <div class="column main"></div>
   <div class="sidebar sidebar-main"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.