How to move comments section out of its parent div How can we move or override the placement of the comments in a node. Usually the comment section is placed inside its content div. My aim is to place this comment section out of its parent div which is usually the node content.

&lt;div class="content"&gt;
 &lt;div property="schema:text" ...&gt;
    &lt;p&gt;
        Some Node Contents ...
    &lt;/p&gt;
 &lt;/div&gt;
 &lt;section rel="schema:comment" ...&gt; &lt;!--move this comment section from here --&gt;
    &lt;h2&gt;Add new comment&lt;/h2&gt;
    &lt;span data-big-pipe-placeholder-id="..."&gt;&lt;/span&gt;
 &lt;/section&gt;
&lt;/div&gt;
&lt;!-- to here --&gt;


I have my template overrides


field--comment.html.twig
comment.html.twig
page.html.twig


Inside themes/contrib/mytheme/templates
Depending on which container you want to escape, you need to use either node.html.twig (recommended) or page.html.twig (harder, unlike node you can't use {{ content.field_comment }} in page).

If you are using node.html.twig (or somehting like node--BUNDLENAME.html.twig) and you manually render {{ content.field_comment }}, then you can avoid double-rendering of comments by rendering the "normal" content using the without filter {{ content|without('field_comment') }}