如何仅使用CSS更改元素的顺序？

Question

我知道有两种方法可以实现：Flexbox布局和CSS表格布局。但是，我无法使用Flexbox ，因为我需要支持旧浏览器。据我所知， CSS表在我的情况下无法工作。

我在<header>标记内有三个块级元素。这是它们出现在我的HTML源文件中的顺序：

1. <h1>标题
2. 使用<img>标记
创建的徽标
3. 一个<div>，就像一个按钮

这是我希望它们呈现的顺序：

1. Logo first
2. <h1>下一步
3. <div>最后

请注意，在呈现页面时，需要交换HTML源文件中第1个和第2个元素的顺序。

另外，我想让所有三个人水平躺着。这就是我不能使用table-header和table-footer 的原因（据我所知，它们只能用于垂直对齐）。

由于SEO问题，我无法更改HTML源文件中的顺序。有没有其他方法可以在不使用Flexbox的情况下实现我想要的效果？

我更喜欢非JavaScript解决方案，但如果JS解决方案可以在不损害搜索引擎优化的情况下完成，我会接受它。

编辑：这是我的代码段HTML：

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

我想支持的旧浏览器是：IE8-10。我知道微软不再支持他们，但超过30％的目标受众使用它们。

最后一件事：为什么我的问题被贬低了？它是否违反任何StackOverflow规则？

Answer 1

你可以在img上使用float: left;让它一直向左移动。

Answer 2

I can't use Flexbox since I need to support older browsers.

对于较旧的浏览器支持，具有Javascript pollyfills的灵活性是向前发展的好方法。

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

也使用像巴别塔这样的东西。 https://babeljs.io/它也可以使Javascript更现代化。

基本上我现在用于HTML / Javascript开发的最佳方法是假设一个现代浏览器，如果需要旧的浏览器，则根据需要进行polyfill / transile。