移动多个元素并将它们放回原处

Question

我有一个任务需要获取此桌面视图： desktop view of banners

并使其响应其移动视图：

mobile view of banners

当我最初解决这个问题时，我使用引导程序来完成任务，但现在我的任务是不使用它。

我尝试了很多方法来让它正常工作，但似乎没有任何效果。我最初尝试了 replaceWith() 并使用了模板文字。我实际上设法正确地进行了设计，但是当弄乱窗口大小时，桌面会被破坏，我无法弄清楚如何正确添加逻辑以获得原始桌面视图。

我最近的尝试，我从这里获得了帮助，因为我希望代码看起来更干净。这是我当前的迭代：

function checkSize() {
        if ($(window).width() < 480) {


            $(".main-container").each(function() {
                $(this).find(".head-banner #header").detach();
                $(this).find(".head-banner .discount").detach();
                //  console.log($(this).find(".body-banner img"));
                $(this).find(".body-banner img").detach().appendTo($(this).find(".head-banner"));
                $(this).find(".body-banner .supply").detach().appendTo($(this).find(".head-banner"));
                $(this).find(".head-banner .best").detach().appendTo($(this).find(".head-banner"));
                //  $(this).find('.head-banner').append(`<i class='fas fa-angle-right'>`)

            });

            $(".main-container").each(function() {
                $(this).find(".head-banner #header").appendTo(".head-banner ");
                $(this).find(".head-banner .discount").prependTo(".head-banner ");
                $(this).find(".head-banner img").appendTo($(this).find(".body-banner .wrapper"));
                $(this).find(".head-banner .supply").prepent($(this).find(".body-banner"));
                $(this).find(".head-banner .best").appendTo($(this).find(".head-banner"));
                //$(this).find('.head-banner').append(`<i class='fas fa-angle-right'>`)
            })

        }
    }
    $(window).resize(checkSize);

这个问题是它似乎也没有恢复到以前的样子。除了这个问题，我还有一个创建的元素，每次我在窗口宽度小于 480 时更改它时都会初始化。我也无法弄清楚这种行为。不过，现在，我真的很想弄清楚最初的问题以及为什么它没有响应。

这是html：

<div class="main-container">
        <div class="head-banner text-bold new-font">
            <span id="header">WEBSITE PRICE</span>
        </div>
        <div class="body-banner">
            <div class="wrapper">
                <div class="supply">
                    <p><span class="text-bold">1</span> <span class="text-medium">Month Supply</span></p>
                </div>
                <img src="./assets/1md_advtur6_500x500@2x.png" />

                <div class="discount-price">
                    <p class="text-bold">$45.00</p>
                    <p class="between"><span id="strike">$45.00 </span><span>each</span></p>
                </div>
            </div>
        </div>
</div>
        <div class="main-container">
            <div class="head-banner">
                <p class="discount">
                    <span>26</span>
                </p>
                <p class="best">
                    <span>BEST</span><br> <span id="value">VALUE</span>
                </p>
            </div>
            <div class="body-banner">
                <div class="wrapper">
                    <div class="supply">
                        <p><span class="text-bold">6</span> <span class="text-medium">Month Supply</span></p>
                    </div>
                    <img src="./assets/1md_advtur6_500x500@2x.png" />
                    <div class="discount-price">
                        <p class="text-bold">$33.17</p>
                        <p class="between"><span id="strike">$45.00 </span><span>each</span></p>
                    </div>
                </div>
            </div>
    </div>

这也可以用一些 CSS 来解决吗？

Answer 1

这可以完全使用 CSS 来完成，并且您的代码会更简洁。

您可以使用CSS Flexbox 在屏幕上布局您的元素。

Media Queries 根据屏幕分辨率更改布局。

body {
  display: flex;
  flex-direction: column;
}
@media (min-width:767px) {
  body {
    display: flex;
    flex-direction: row;
    }
}

<div>
  <h1>First Item</h1>
  <span>Lorem Ipsum Text</span>
</div>
<div>
  <h1>Second Item</h1>
  <span>Lorem Ipsum Text</span>
</div>
<div>
  <h1>Third Item</h1>
  <span>Lorem Ipsum Text</span>
</div>

Answer 2

以下示例代码将对您有所帮助：

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  width: 30%;
}

input {
  visibility: hidden;
  position: absolute;
}
h1,
h1 label {
  cursor: initial;
}

@media (max-width:767px) {
  li {
    width: 100%;
  }
  input {
    display: block;
  }
  p {
    display: none;
  }
  input:checked~p {
    display: block;
  }
  h1,
  h1 label {
    cursor:pointer;
    width: 100%;
    display: block;
  }
}

<ul class="list">
  <li>
    <input type="checkbox" id="Heading 1">
    <h1><label for="Heading 1">Heading 1</label></h1>
    <p>Summary goes here...</p>
  </li>
  <li>
    <input type="checkbox" checked id="Heading 2">
    <h1><label for="Heading 2">Heading 2</label></h1>
    <p>Summary goes here...</p>
  </li>
  <li>
    <input type="checkbox" id="Heading 3">
    <h1><label for="Heading 3">Heading 3</label></h1>
    <p>Summary goes here...</p>
  </li>
</ul>