If you are using a Responsive theme, then you must be familiar with the stacked layout of your theme in mobile devices starting from iPad and other small devices than that. In smaller devices the Content part displays full width below your header and then the sidebar below that.
Some of you might have an interest for adding the sidebar to the top of the content in the smaller screens so that your audience will not miss some useful things you have for them in the sidebar after reading a long content. So you need them to go through the sidebar first and then the content.
There is a very easy process you need to follow for doing that. This process requires editing core files. So please make sure to use Child Theme before doing that.
If you need to do the same for the pages then you need to go to Appearance > Editor > page.php.
If you need to do the same for the posts then you need to go to Appearance > Editor > single.php.
If you need to do the same for the categories then you need to go to Appearance > Editor > archive.php/category.php.
If you need to do the same for the Search Page then you need to go to Appearance > Editor > search.php.
If you need to do the same for the Blog Page then you need to go to Appearance > Editor > archive.php.
and look for this line at the bottom of the file:
<?php get_sidebar(); ?>
You need to remove that line from there and add that just under:
<?php get_header(); ?>
After all that over, please go to your Custom CSS field and add this there:
#page {
clear:none;
}
clear:none;
}
This will move your sidebar before the content in small screens.
