Sidebar on mobile on top

Hey Team,

since I put the sidebar on mobile on top there is a hugh gap between the product filder and the first shown product. Plus: The first product ist display to the right.

I used this code:

@media only screen and (max-width:767px) {
.responsive #top.woocommerce-page #main .sidebar {
display: block;
border-color: transparent;
}

.responsive #top.woocommerce-page #main .sidebar .inner_sidebar {
margin-left: 0;
}

.responsive #top.woocommerce-page #wrap_all .container_wrap_first .container {
display: flex;
flex-direction: column-reverse;
}
}

Can you help?