how to make right sidebar after my content on mobile?

Hi there,

i am sorry - can you explain a little more - as currently the Sidebar is displayed after the content on mobile.

I meant in tablet.
My bad.

Try adding this CSS:

@media(max-width: 1024px) {
    #content {
        display: block !important;
    }
    #content :is(.content-area, .widget-area) {
        width: 100%;
    }
}

It worked, but now it's 100% width and not looking good.
Plus, the margin on the sides are disappeared.

Change to:

@media(max-width: 1215px) {
    #content {
        display: block !important;
    }
    #content :is(.content-area, .widget-area) {
        width: 100%;
    }
    #content .widget-area {
        padding: 0 20px;
    }
}

The last rule includes some padding for the sidebar.

Thanks!

You're welcome