Sidebar shows above content at smaller responsive sizes

[mpet29]

I have a page set up on a custom template (using News Pro) to show a list of all authors, with most recent post, sorted by most recent activity. It works quite well. The problem I have is that while the right sidebar shows properly at large sizes, when this page breaks down responsively on mobile, the right sidebar shows first, above all content, which is not a great experience.

I'm sure this is because of where I have <?php get_sidebar();?> below, but I've been unable to figure out where to place it so that it doesn't then mess up the placement of the sidebar on the regular desktop view.

Can anyone help?

<?php
/**
 * Template Name: All Author Archives
 */

get_header();?>
    <div id="all-authors-archive">
      <h1 style="font-family: 'Noto Sans', sans-serif;"><?php the_title(); ?></h1><?php get_sidebar();?>
      <p><em>This page displays a list of our current authors..</em></p>

<?php
// Arguments to pass to get_users
$args = array( 'orderby' => 'post_count', 'order' => 'DESC', 'role' => 'author', 'exclude' => '1, 31052', 'post_type' => 'post', 'post_status' => 'publish' );
// Query for the users
$authors = get_users_ordered_by_post_date( $args ); ?>

<?php
// Loop through all the users, printing all of their posts as we go
foreach ( $authors as $author ) { ?>
      <a name="<?php echo $author->user_nicename; ?>"></a>
      <div class="author-posts-wrapper" id="author-<?php echo $author->ID; ?>-posts-wrapper">
       <div class="author-posts" id="author-<?php echo $author->ID; ?>-posts">
          <div id="author-page-name"><a href="<?php echo get_author_posts_url( $author->ID ); ?>"><?php echo $author->display_name; ?></a><br>
          </div>
          <div id="author_bio"><?php echo $author->description; ?></div><br>
 <div id="authors_recently"><em>Recently: </em>&nbsp; <?php
  // Set up a Loop, querying for all of the current user's posts
  $args = array( 'author' => $author->ID, 'posts_per_page' => 1 );
  $posts = query_posts($args);
  // Now that we have the posts, simulate a Loop here or use get_template_part
  // if we already have the output in another template, like:
  // get_template_part( 'loop', 'all-authors' ); //
  if ( have_posts() ) : ?>
       <?php while ( have_posts() ) : the_post(); // Print whatever we want for each post - for now the title and date ?>
         <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> &mdash; <?php echo get_the_date(); ?>
    <?php endwhile; ?>
        </div><!-- #author-post-list -->
  <?php else: ?>
          <p>This author has not yet published any posts</p>
  <?php endif; ?>
        </div><!-- #author-posts -->
      </div><!-- #author-posts-wrapper -->
<hr><?php } // End looping over all users ?>
 
    </div><!-- #all-authors-archive -->
<?php
get_footer();
?>

[AnitaC]

Hi did you resolve this issue yet?

---

Need help with customization or troubleshooting? Reach out to me.

[mpet29]

Hi -- I have not. Any ideas?

[Author]

Posts