Sidebar on top in mobile view

Question

Shop page link I'm using astra theme. I add some filters on sidebar. On mobile view the filters come down to last of the page. I want the filters to be displayed above the content. Please guide on this or any alternative way (may be a plugin) to resolve this issue.

Tried the following code [reference of code link]

@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;
  }
}

I try different tutorials to display the sidebar on top in mobile view but nothing works out.

Answer 1

There is a class that astra theme use in order to reverse the two containers, widgets reversed with products. Thus, if you change that from CSS you would have the results you are looking for:

@media (max-width: 921px)
.ast-left-sidebar #content > .ast-container {
    display: flex;
    flex-direction: column!important;
    width: 100%;
}

Place the above code in style.css file of your child's theme and make sute it takes place. The diference here was:

flex-direction: column-reverse;

You can test it and let me know.