Moving around multiple elements and putting them back in place

Question

I have an assignment where I need to take this desktop view: desktop view of banners

and make it responsive to its mobile view:

mobile view of banners

When I originally tackled this problem, I used bootstrap to complete the assignment, but now I'm tasked to not use it.

I have tried a myriad of things to make it work properly, but nothing seems to stick. I initially tried replaceWith() and used template literals. I actually managed to get the design properly, but when messing with the window size, desktop would be ruined and I couldn't figure out how to add the logic in properly to get the original desktop view.

My latest attempt, I got help from here because I wanted the code to look cleaner. This is my current iteration:

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);

The problem with this one is that it too doesn't seem to snap back to what it once was. Along with that problem, I have a created element that initializes every time I change the width of the window when it's less than 480. I can't figure out that behavior either. Right now, though, I really want to figure out the initial issue and why it's not being responsive.

This is the 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>

Could this be tackled with some CSS as well?

Answer 1

This can be done purely with CSS and your code will come out cleaner.

You can use CSS Flexbox to layout your elements on the screen.

Media Queries to change your layout depending on the screen resolution.

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

Following sample code will help you:

.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>