title: The "RenderSection" method has already been called
body: <p>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.</p>
  
  <p>This uses the Bootstrap 3 classes to only display the nav on small and extra small devices:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default visible-xs-block visible-sm-block" role="navigation"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-navbar"&gt;
                   &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                   &lt;span class="icon-bar"&gt;&lt;/span&gt;
                   &lt;span class="icon-bar"&gt;&lt;/span&gt;
                   &lt;span class="icon-bar"&gt;&lt;/span&gt;
               &lt;/button&gt;
               &lt;a class="navbar-brand visible-xs visible-sm" href="#"&gt;IT Tracking System&lt;/a&gt;
           &lt;/div&gt;
           &lt;div class="collapse navbar-collapse" id="mobile-navbar"&gt;
               &lt;ul class="nav navbar-nav main-menu"&gt;
                   @RenderSection("SideBar")
               &lt;/ul&gt;
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/nav&gt;
  </code></pre>
  
  <p>For PC Users it should be a left sidebar.  It is hidden on small and extra small devices.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-2 left-sidebar hidden-xs hidden-sm"&gt;
          &lt;aside&gt;
              &lt;nav class="main-nav"&gt;
                  &lt;ul class="main-menu"&gt;
                      @RenderSection("SideBar")
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/aside&gt;
      &lt;/div&gt; &lt;!-- .left-sidebar --&gt;
      &lt;div class="col-xs-12 col-md-10 content-wrapper"&gt;
           @RenderBody()
      &lt;/div&gt; &lt;!-- .content-wrapper --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my views I have:</p>
  
  <pre><code>@section SideBar {
      ...
  }
  </code></pre>
  
  <p>The problem is calling <code>@RenderSection("SideBar")</code> multiple times with the same section name.  Any suggestions on how I can fix this? </p>