Display right sidebar in mobile view below header

Hi I am trying to display a right sidebar widget below the header in mobile view only.

I found some code that displays the right sidebar above the header but I am trying to get it below the header as it is a filter widget.

@media (max-width: 768px) {

#wc-column-container {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
	
#right-sidebar {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}

.content-area {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}

}

any ideas? thanks in advance