I _somewhat_ solved this problem with my Jekyll theme based of Tufte CSS[0]. Not perfect, but it just places the marginnote below it's corresponding element.

[0] https://et-jekyll.netlify.app/et-jekyll-theme/

Edit: I realize you are referring to "footnotes" and not margin/side notes, but I believe you could use the same method.

I've thought about this a lot and I can think of two ways but I am too lazy to implement either of them.

The first is to use Javascript to dynamically move the footnotes, or to hide them behind a dynamic interface. I've seen other sites use similar techniques. However, one of my original goals was to avoid JavaScript where possible and there are always some users who don't run js.

The second is just to include the footnotes and sidenotes twice in the document in different places and use css media queries to select between them. This wouldn't be a big deal since I am already generating the document from markdown anyway.