javascript - When exactly starts rendering of a HTML DOM node?

Question

Consider the following example:

<div class="col-2">Some content</div>
<main>
  <!-- lot of content here, including many images etc. -->
</main>
<div id="lastColumn" class="col-2">Last column content</div>
<script>
  if (localStorage.getItem("lastColumnDisplayed") == "false") {
    document.getElementById("main").style.classList.add("col-10");
    document.getElementById("lastColumn").style.display = "none";
  } else {
    document.getElementById("main").style.classList.add("col-8");
    document.getElementById("lastColumn").style.display = "block";
  }
</script>

Are the elements within the <main> already being rendered in the time when the <script> is executed? I ask because images and tables within the <main> have theirs width (i.e. the images are scaled) dependent on the <main> width, which is defined by bootstrap's grid class .col-8 or .col-10.

Does it have any sense to try to add the class directly when defining the opening <main> tag? Example:

<div class="col-2">Some content</div>
<script>
document.write('<main class="' + getColumnClass() + '">');
</script>
  <!-- lot of content here, including many images etc. -->
</main>
<div class="col-2">Some content</div>
<!-- ... -->