Wordpress template aligment

Question

I am trying to align left content and right widget areas to stack in horizontal line. This is my code:-

    get_header(); 

?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
                    <div class="page-box"><!--page wraper box-->    
            <?php
            while ( have_posts() ) : the_post();

                get_template_part( 'template-parts/content', 'page' );

                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;

            endwhile; // End of the loop.
            ?>
                    </div><!--page wraper box-->     
        </main><!-- #main -->
    </div><!-- #primary -->

<?php
get_sidebar('left');
get_sidebar('right');
get_footer();

And css:-

    /* Right side widgets. */
.right-widgets{
 float:right;  
 margin-right:-300px; 
}


/* Left side widgets. */
.left-widgets{

   float:left; 
   margin-left:-300px;
}

    .site-content{
    position:relative;
    width: 1000px;
    width: 62.5rem;
    margin: 2em auto 0em; 

}
.content-area {
    width: 100%;
    float:none;
    display:inline-block;
    position:relative;   
    clear:none;
}

.site-content .widget-area {
   position:relative;
   overflow: hidden;
   width: 300px;
   padding:1em;
   display:inline-block;
   clear:none;
}

What happens is that it is positioning widget areas on left and right as it should but below the content area, and not in line.

When I load left sidebar before content area works fine, but on mobile screen left sidebar loads before the content, and I would like both sidebars to appear after the content. Any ideas whats am I doing wrong here?

Answer 1

If you cant find any other solution,you can try this way. You can call the left sidebar twice, before the content and after the content inside of a div. Give the different class name. Using css hide the first left sidebar in mobile and show in desktop and vise versa.