Place the Sidebar Above the Main Content on Mobile Devices

On mobile devices, the screen is much more narrow than on laptops, so the sidebar content doesn’t fit well next to the main content. For this reason, they need to be placed in the same column with one displaying before the next.

Ignite places the post/page content first which is best for blogs and most websites. However, there are times when you may instead want the sidebar widgets to appear before the post/page content on mobile devices.

You can add the following CSS to the Additional CSS section in the Customizer to make this change to your site:

@media all and (max-width: 899px) {

  .overflow-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .overflow-container .sidebar-primary-container {
    order: 1;
  }
  .overflow-container .main {
    order: 2;
  }
}