On small viewports, the sidebar is under the main content. On large viewports the side bar floats on the right side of the main content.
On large viewports the main content gets ¾ of the available space, the rest ¼ part is left for the side bar. We can accomplish this by using the col-md-9 and col-md-3 classes in our HTML.
The layout columns are set in the default layout template in the html/layouts/default.html file:
<div class="main-content container">
<div class="row">
<main class="col-md-9" role="content">
{{> body}}
</main>
<aside class="col-md-3">
{{> sidebar}}
</aside>
</div>
</div>
Again the col-md-* classes are not required. You can accomplish the same by editing the following SCSS code in the scss/includes/_blog.scss file:
main[role="content...