How do I change the order of elements using only CSS? – SEO

I know of two ways this can be achieved: Flexbox layout and CSS Table layout. However, I can’t use Flexbox since I need to support older browsers. CSS Tables, as far as I know, won’t work in my situation.

I have three block-level elements inside the <header> tag. This is the order in which they appear in my HTML source file:

1. <h1> heading
2. A logo created using the <img> tag
3. A <div> which acts like a button

This is the order I wish them to be rendered:

1. Logo first
2. <h1> next
3. <div> last

Note that the order of the 1st and the 2nd element in the HTML source file need to exchanged when the page is rendered.

Also, I want all three to lie horizontally. This is why I can’t use table-header and table-footer (as far as I know about them, they can only be used in case of vertical alignment).

I can’t change the order in the HTML source file because of SEO concerns. Is there another way to achieve the effect I want without using Flexbox?

I would prefer a non-JavaScript solution, but if a JS solution can do it without harming the SEO, I’ll accept it.

EDIT: Here’s my snippet HTML:

<header>
  <h1>Title
  <img src="logo.png" alt="Logo">
  <div id="menu-button"></div>
</header>

The older browsers I am trying to support are: IE8-10. I know Microsoft doesn’t support them anymore but over 30% of my target audience uses them.

One last thing: why is my question being downvoted? Does it violate any StackOverflow rules?