A WordPress website is the combination of themes, plugins and widgets.
Widgets area always positioned either on the left side, top, right side, bottom of the page or in all sides.
Sometimes you may need to change your sidebar position for a specific page.
Suppose, when people will visit your article page from mobile device, you may want to know how to show sidebar above content on mobile devices.
Normally if you keep the sidebar right side at the widget area it is OK to show perfectly in the large devices like desktop of laptop.
But you may need to show sidebars on the top that is above the content like search bar on a specific page.
It is possible to do that by the inputting the following codes:
/*******codes starts here***********/
media all and (max-width: 999px){
.page-id-1242 .row {
display:flex;
flex-direction:column-reverse;
}
}
/*******codes ends here***********/
Please note that by this method you can reverse a div’s content to show from top to bottom position or from bottom to top position depends on the situation.
Thus you can move sidebars from top position to bottom position or any-other.
In this case I had to reverse content from top to bottom on a specific page only for mobile devices.
Therefore I have used media query. Here I needed to show this change for a specific page only.
That’s why before row tag I have added .page-id-1242 which is mandatory to show changes on a specific page.
other wise, this change will affect all pages which you don’t want to be happened.
If you face any issue by doing this or if you feel this article helpful. Please leave a comment and I will try to reply you as soon as I can.
