Question

我是CSS / JS / HTML世界的新手。我读了一些关于如何重新定位 divs 的帖子，但它们都包含在同一个父div容器中。在我的场景中，我需要将其中一个内部div移动到页面的末尾。

<div class="container">
    <div class="block-row">
        <div class="col-8">
          <div class="richtext">
             Some Text
          </div>

          <ul class="list clearfix">
            <li class="list-item">
              List item 1 text
            </li>
            <li class="list-item">
              List item 2 text
            </li>
          </ul>  

          <div class="richtext">
            <p>Some text that needs to appear at the bottom of the page in mobile view only</p>    
          </div>  
        </div>

        <div class="col-70 sidebar">
            <div class="info">     
              <h2 class="info-head">
                <span>Text</span> text
              </h2>
            </div>            
        </div>
    </div>
</div>

我需要使用 <ul> 元素后面的类 richtext 移动div，在带有侧边栏类的div之后页面的移动视图。

CSS或JS是否可以采用它？什么是最好和最优雅的方法呢？

谢谢！

Answer 1

一种方法是使用jquery的函数insertBefore()。

if($(window).width() >= 768)
      $("ul + .richtext").insertBefore(".sidebar");
 else
      $(".sidebar").insertBefore("ul + .richtext");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="block-row">
        <div class="col-8">
          <div class="richtext">
             Some Text
          </div>

          <ul class="list clearfix">
            <li class="list-item">
              List item 1 text
            </li>
            <li class="list-item">
              List item 2 text
            </li>
          </ul>  

          <div class="richtext">
            <p>Some text that needs to appear at the bottom of the page in mobile view only</p>    
          </div>  
        </div>

        <div class="col-70 sidebar">
            <div class="info">     
              <h2 class="info-head">
                <span>Text</span> text
              </h2>
            </div>            
        </div>
    </div>
</div>

在移动视图中将子div移动到末尾

1 个答案: