How to Display WooCommerce Sidebar on Top for Mobile Devices?

When you enable WooCommerce sidebar on a shop, cart, checkout page and/or single product page, the sidebar is displayed in a secondary container.

What is a secondary container?

Basically, a container is where the main content and information appears. In general, omit the header and footer part of the website and what remains is the container. The content area and the sidebar are parts of the container. The content area is technically called as the primary container, whereas the sidebar is the secondary container.

On mobile devices, the primary container stacks on a secondary container. So, the secondary container is displayed below the primary container.

If you wish to display the sidebar above the primary container on mobile, you would need to use custom CSS code. Necessary CSS code is mentioned below for both sidebars.

For Left Sidebar-

@media (max-width: 768px){
  .ast-left-sidebar #content>.ast-container{
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
      -moz-box-orient: horizontal;
      -moz-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
  }
}

For Right Sidebar-

@media (max-width: 768px){
    .ast-right-sidebar #content>.ast-container{
        -js-display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .ast-right-sidebar #content>.ast-container>#primary {
        order: 2;
    }
    .ast-right-sidebar #content>.ast-container>#secondary {
        order: 1;
    }
}

Where can I put this custom CSS code?

You can insert this CSS in two ways-

1. In Customizer: From WordPress backend navigate to Appearance > Customize > Additional CSS  and add code the custom CSS area. (Recommended) OR
2. Through child theme’s style.css: Edit the child theme’s style.css and add a required CSS.

Other useful links-

1. How to Install Astra Child Theme?
2. How to edit style.css in a child theme?