layouts/_default/single.html

{{ define "main" }}
<main class="d-flex flex-xl-row flex-column">
  <!-- This one is for mobile and small viewport. -->
  <aside class="text-muted align-self-start mb-3 p-0 d-xl-none d-block">
    <h2 class="h6 sticky-top m-0 p-2 bg-body-tertiary">On this page</h2>
    {{ .TableOfContents }}
  </aside>
  <article class="flex-column me-lg-4">
    {{ .Content }}
  </article>
  <!-- This one is for large viewport. -->
  <aside class="text-muted align-self-start mb-3 mb-xl-5 p-0 d-none d-xl-flex flex-column sticky-top">
    <h2 class="h6 sticky-top m-0 p-2 bg-body-tertiary">On this page</h2>
    {{ .TableOfContents }}
  </aside>
</main>
{{ end }}