重新排列元素顺序响应式设计

Rearranging element order responsive design

本文关键字：响应 顺序 元素 新排列 排列      更新时间：2023-09-26

我的标记是 

<div class="info-container">
     <span class="item1">item1</span>
     <a class="item2" href="#">item2</a>
     <a class="item3"   href="#">item3</a>
</div>

我想在媒体宽度达到 800 像素（@media（最小宽度：800 像素）时重新排列到下面）

<div class="info-container">
     <a class="item2" href="#">item2</a>
     <span class="item1">item1</span>
     <a class="item3"   href="#">item3</a>
</div>

到目前为止，我只在我的应用程序中使用了 angularjs（上面的代码在附加到控制器的视图中）。实现这一目标的最佳方法是什么？我应该使用 angularjs 来做到这一点吗？还是在我的控制器中使用JS或JQuery执行此操作的唯一方法？我不想使用弹性框解决方案。

这里有一篇关于这个问题的很棒的文章：

http://www.jtudsbury.com/thoughts/rearrange-div-order.php

一个简单的解决方案是在 a.item2 之后复制 span.item1，并在上面显示：none;当宽度高于 800px 时，将显示它并隐藏第一个跨度。

因此，您将拥有：

<div class="info-container">
    <span class="item1">item1</span>
    <a class="item2" href="#">item2</a>
    <span class="item1" style="display:none;">item1</span>
    <a class="item3"   href="#">item3</a>
</div>
<style>
    @media (min-width:800px){
        .info-container .item1
        {
            display:block;
        }
        .info-container:first-child
        {
             display:none;
        }
    }
</style>
这

有什么好处吗？ ## 编辑 由于某种原因不适用于 SO 片段，添加了小提琴JS 小提琴

$( window ).resize(function() {
 if( $('document').width() <="800"){
   var span=$('span.item1');
   span.remove();
   $('a.item2').append(span);
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-container">
     <span class="item1">item1</span>
     <a class="item2" href="#">item2</a>
     <a class="item3"   href="#">item3</a>
</div>

相关文章：