Implementing responsive sidebars

So far, we have only been dealing with a one column layout. All of our blocks have been assigned to regions before, after, or within our main content. Now we are faced with our first block that is associated with a sidebar. The challenge is to make sure that when content is added to a sidebar, our main content region adjusts accordingly.

For this next section, we will be modifying our page.html.twig template to conditionally look for the existence of sidebars and alter the column classes of our content region.

Begin by opening page.html.twig and adding the logic and markup for the sidebar first region. This markup will be added directly below the <div class="row"> section, but above the content wrapper:

New markup

{% if page.sidebar_first %}
  <aside class="layout-sidebar-first" role="complementary">
    <div class="col-md-3">
      {{ page.sidebar_first }}
    </div>
  </aside>
{% endif %}

The markup we added conditionally checks...