Why is a html element shown BEFORE predecessor elements on webpage?

Lets have a look at an example webpage:

https://www.makeuseof.com/tag/lock-methods-android-phone/

Now right click (in Firefox) on the text (starting “You can secure your Android phone’s lock screen….”) below the headline and select “Inspect element” from context menu

The element has a class “heading_excerpt”.

Now have a look on the element(s) in HTML code just ABOVE this element. They have a class e.g. “heading_meta”.

Although they are physically written in HTML code ABOVE the “heading_excerpt” they are appear on the loaded webpage in the opposite order.

Why?

Is there a way to let the browsers rendering machine show them in the order they appear in HTML source code?

I have no access to the original web page server but may want to re-arrange it afterwards (from user script).

Peter

Also in #CSS _↴