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

Question

我知道这可以通过两种方式实现：Flexbox 布局和 CSS 表格布局。但是，我不能使用 Flexbox，因为我需要支持旧版浏览器。 据我所知，CSS 表格不适用于我的情况。

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

1. <h1>标题
2. 使用<img> 标签创建的徽标
3. <div>，作用类似于按钮

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

1. 徽标优先
2. <h1>下一个
3. <div>最后一个

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

另外，我希望三个人都平躺。这就是为什么我不能使用 table-header 和 table-footer（据我所知，它们只能在垂直对齐的情况下使用）。

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

我更喜欢非 JavaScript 解决方案，但如果 JS 解决方案可以做到而不损害 SEO，我会接受。

编辑：这是我的 sn-p HTML：

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

我尝试支持的旧版浏览器是：IE8-10。我知道 Microsoft 不再支持它们，但超过 30% 的目标受众使用它们。

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

Answer 1

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

对于较旧的浏览器支持，灵活的 Javascript pollyfills 是前进的好方法。

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

也使用像 Babel 这样的东西。 https://babeljs.io/ 也可以让 Javascript 更现代。

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

Answer 2

您可以在 img 上使用 float: left; 使其一直向左移动。