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 Aug 17 '18 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 Aug 17 '18 at 9:58

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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