The "RenderSection" method has already been called

Question

I have a Section called "SideBar" that needs to be rendered in my _Layout.cshtml twice. When users are on a PC I want the section to be rendered as a Left Sidebar, but on mobile devices I need the section to be rendered as a bootstrap collapsible navbar.

This uses the Bootstrap 3 classes to only display the nav on small and extra small devices:

<nav class="navbar navbar-default visible-xs-block visible-sm-block" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-navbar">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand visible-xs visible-sm" href="#">IT Tracking System</a>
         </div>
         <div class="collapse navbar-collapse" id="mobile-navbar">
             <ul class="nav navbar-nav main-menu">
                 @RenderSection("SideBar")
             </ul>
         </div>
     </div>
 </nav>

For PC Users it should be a left sidebar. It is hidden on small and extra small devices.

<div class="row">
    <div class="col-md-2 left-sidebar hidden-xs hidden-sm">
        <aside>
            <nav class="main-nav">
                <ul class="main-menu">
                    @RenderSection("SideBar")
                </ul>
            </nav>
        </aside>
    </div> <!-- .left-sidebar -->
    <div class="col-xs-12 col-md-10 content-wrapper">
         @RenderBody()
    </div> <!-- .content-wrapper -->
</div>

In my views I have:

@section SideBar {
    ...
}

The problem is calling @RenderSection("SideBar") multiple times with the same section name. Any suggestions on how I can fix this?