You should write first whatever suits your workflow.

I think writing HTML first is the way to go, for the benefit of progressive enhancement, accessibility, SEO:

A barebones HTML document is the lowest level which you can enhance. It is the level of Lynx browsers, screenreaders and formerly search engines. So start with a properly structured HTML document. Then enhance it with CSS and then JS.

If CSS fails to load you will still present a readable document (not littered with iFrames or abusing elements for styling (like header tags)). You will instantly spot where to place skip-links, or skip to content links. You can focus on putting the most relevant content in the first 100 or so words in the HTML document. Writing HTML and then CSS first will ensure in most cases that you won't use JavaScript for layout. You also won't hide content with "display: none", if you want collapsible content, you'll enhance it with JavaScript, and add "display:none" after the page has loaded.

Even if you use a CSS/grid framework, that shouldn't hamper writing the HTML first. You can always add the <div class="row"> later on. Or decide to write your own grid, since the website only uses 4 sizes of columns and a 100kb CSS file is a bit overkill.

In my opinion good design follows from the content. Don't try to strongarm content in a design.