如何使用 javascript 或 CSS 更改 HTML 标记结构？答案

【问题标题】：How to change HTML markup structure using javascript or CSS?如何使用 javascript 或 CSS 更改 HTML 标记结构？
【发布时间】：2015-05-14 17:38:16
【问题描述】：

我在一个页面中有以下标记。

<div class="tm_left">
    <!-- left side bar code-->
</div>
<div class="tm_center">
    <!-- content code-->
</div>
<div class="tm_right">
    <!-- right side bar code-->
</div>

当页面以 768px 及以下宽度打开时，是否可以更改此标记：

<div class="tm_center">
    <!-- content code-->
</div>
<div class="tm_left">
    <!-- left side bar code-->
</div>
<div class="tm_right">
    <!-- right side bar code-->
</div>

我不想碰<div class="tm_center"></div> 当页面以 768px 及以下宽度打开时，我要做的只是在其他两个 div 之间移动<div class="tm_left"></div>。

可以用java script/css实现吗？如果 java 脚本是解决方案，它可以在手机上运行吗？

【问题讨论】：

你有没有尝试过什么？
你可以两者都做，Javascript 通过监听窗口调整大小事件 ant 实际移动 DOM，或者 CSS 通过使用相对定位等和一些 @media 选择器来模拟这种行为。祝你好运
您可以通过使用 css 媒体查询轻松做到这一点。 @media（最大宽度：768px）{ ... }
您也可以使用 CSS，但不建议您这样做。更好地更改 HTML。

标签： javascript html css

【解决方案1】：

您尝试过 Flexbox Order 属性吗？

您可以通过将 display: flexbox 添加到容器来更改顺序：

<div class="container">
   <div class="tm_center">
    <!-- content code-->
   </div>
   <div class="tm_left">
    <!-- left side bar code-->
   </div>
   <div class="tm_right">
    <!-- right side bar code-->
   </div>
</div>

然后在 CSS 中：

.container { display: flexbox }
.tm_center { flex-order: -1;}

注意前缀和兼容性。

【讨论】：

【解决方案2】：

请在问这些问题之前尽力而为！但是你的答案在下面！

Demo

$(window).resize(function(){
  if(window.innerWidth < 768) {
    var $detCenter = $(".tm_center").detach();
    $(".tm_left").before($detCenter);        
  }
});

【讨论】：

很好，只要它对你有帮助:)
确实，发帖者经常提到他们已经尝试过的东西，但这是必须的吗？为什么在提问之前暗示 user3090610 还没有尽力？