Flux et positions d'éléments "optimaux"

Bonjour à tous !

Je me lance une fois de plus dans de l’intégration pour mon CV. Mais cette fois-ci, c’est plus lourd comme modifications. Et sachant mes compétences en CSS, ceci couplé avec la fréquence où je me lance dans ce genre de travaux, ben j’ai besoin d’aide. 

Je souhaite réaliser une mise en page comme ci-dessous, classique, mais toujours moins simpliste et utilisant mieux l’espace que mon design précédent.

Et l’idée est des arrière-plans différents pour le chapeau, la colonne de gauche et le contenu principal.

Je pars du principe (et c’est peut-être là le problème) que le flux ci-après, avec un CSS adapté et éventuellement des conteneurs supplémentaires, reste pertinent pour mon souhait.

<header>
    <Image />
    <Chapeau />
</header>
<div id="Body">
    <aside>
        Compétences
        Références
    </aside>
    <main>
        Expériences
        Formation
    </main>
    <Notes>
        Date de mise à jour du CV
        Explications d'abréviations, comme des notes de fin
    </Notes>
</div>

Comme le contenu le plus topophage¹ est évidemment dans la partie principale, j’imagine les notes en fin de document, mais à gauche, aligné au bas du conteneur, et visuellement présentées comme si elles étaient dans la colonne de gauche, donc principalement même jeu de couleurs.

Donc :

• est-ce que mon idée est réalisable avec les postulats ci-dessus ?
• ne connaissant pas assez CSS et n’ayant pas trouvé d’exemple qui me paraisse convenir, quelqu’un saurait-il m’aiguiller pour placer ces notes en début de ligne sans être sous le contenu principal ?

Merci d’avance 

Cela me paraît déjà plus accessible que flexbox, qui avait l’avantage dans ma compréhension de permettre du responsive de manière plus simple.

Si je réfléchis correctement, avec les grilles, je peux/dois les redéfinir avec les breakpoints ?

Si mes souvenirs sont bons, les grid CSS n’ont aucun rapport avec les breakpoints. Ici un article qui explique en quoi ils sont complémentaires

https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

Pour gérer le responsive ? Tu fais très facilement ce que tu veux avec une poignée de directives @media. L’idée générale c’est que tu déclares tes blocs proprement dans du HTML (pas besoin d’un déluge de <div> inutiles / juste pour le design) ; et tu définis dans le CSS selon quelle grille ces blocs vont s’afficher en fonction de la largeur de l’écran (ou autres). Cf par exemple ce CSS qui gère ce site.

Je n’ai manifestement pas utilisé la bonne terminologie en parlant de breakpoint 

Mais c’est bien ce que j’imaginais et voulais exprimer, soit qu’en gros, dans les règles selon @media, pour moi on redéfinit la grille : autres colonnes ou nouvelles dimensions, etc.

Le temps de comprendre que d’une manière ou d’une autre j’écrasais le placement d’un de mes éléments principaux dans la grille, j’ai enfin pu arriver à ce que je voulais (pas uniquement cette mise en page de base, je vous rassure).

Merci à tous !