Load CSS in footer, like your can with JS?

Yes, technically you can. But you shouldn’t load css in the footer, css links outside of the <head> are considered invalid.

A better technique would be to add the css-links to the dom with javaScript. You may even want to split out the css so that critical portions are loaded inline (so you avoid a FOUC)

Here’s a technique as suggested by GiftOfSpeed

This JS will create your css-link elements dynamically.

<script type="text/javascript">
  /* First CSS File */
  var wpse326013 = document.createElement('link');
  wpse326013.rel="stylesheet";
  wpse326013.href="https://wordpress.stackexchange.com/questions/326013/css/yourcssfile.css";
  wpse326013.type="text/css";
  var godefer = document.getElementsByTagName('link')[0];
  godefer.parentNode.insertBefore(wpse326013, godefer);

  /* Second CSS File */
  var wpse326013_2 = document.createElement('link');
  wpse326013_2.rel="stylesheet";
  wpse326013_2.href="http://wordpress.stackexchange.com/css/yourcssfile2.css";
  wpse326013_2.type="text/css";
  var godefer2 = document.getElementsByTagName('link')[0];
  godefer2.parentNode.insertBefore(wpse326013_2, godefer2);
</script>

& for graceful degradation, we also include the following inside of the head element

<noscript>
  <link rel="stylesheet" type="text/css" href="https://wordpress.stackexchange.com/questions/326013/css/yourcssfile.css" />
  <link rel="stylesheet" type="text/css" href="http://wordpress.stackexchange.com/css/yourcssfile2.css" />
</noscript>

You could also wrap the execution of the javaScript in a timeout, the following example would delay execution by 2 seconds.

setTimeout(function(){
  var wpse326013 = document.createElement('link');
  wpse326013.rel="stylesheet";
  wpse326013.href="https://wordpress.stackexchange.com/questions/326013/css/yourcssfile.css";
  wpse326013.type="text/css";
  var godefer = document.getElementsByTagName('link')[0];
  godefer.parentNode.insertBefore(wpse326013, godefer);
}, 2000);