Question

我在页面中有以下标记。

<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脚本是解决方案，它将在手机上运行吗？

Answer 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;}

注意前缀和兼容性。

Answer 2

在提出这些问题之前，请尽力而为！但是你的ans在下面！

Demo

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

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

2 个答案: