Es kommt natürlich auch immer ein bisschen auf deinen CSS-Code an, wie sensibel der auf Vertauschungen etc. im HTML reagiert. Die Trennung von Layout und Inhalt ist aber etwas anders gemeint.
In deinem HTML-Code sollte bei so einem Design nichts mehr stehen, was zum Grundgerüst deiner Seite gehört. D.h. zum Beispiel wenn du eine Headergrafik auf deiner Website hast, die zum Grundsätzlichen ayout gehört, dann hat die ja nichts mit dem speziellen Seiteninhalt zu tun. Ein Fehler wäre es also diese Datei per
einzubinden. Getrennt vom Inhalt hast du es, wenn du sie per CSS z.B. als Hintergrund eines Blockelements einfügst.
Etwas genauer zu deiner Frage:
Wenn du auf deiner Seite zwei Boxen hast, die untereinader stehen, dann kann man doch auch davon ausgehen, dass man selbst ohne Layout die obere Box zuerst lesen sollte. Deshalb muss diese natürlich im Code auch oben stehen. Ein Stichwort ist hier bei "Linearisierbarkeit". Wenn du die Webdeveloper Toolbar in Firefox benutzt und du da dann mal das CSS auf deiner Seite komplett abschaltest, sollte deine Seite mit den Standardformatierungen, die der Browser benutzt, noch völlig sinnvoll aufgebaut sein. Weil genau so ist die Seite linearisiert, da einfach alle Blockelemente untereinander angezeigt werden.
Ich hoffe das hilft etwas. ;)