javascript - 在小萤幕上使用insertBefore div，在大萤幕上使用insertAfter(insertBefore div on small screens and insertAfter on large screens)

Question

In my example I'm trying to insert the Small Div above the Large Div on large screens only.(在我的示例中，我尝试仅在大屏幕上将“小Div”插入到“大Div”上方。)

Then on window resize I want to insert the same Small Div bellow the Medium Div on small screens only.(然后在窗口调整大小时，我只想在小屏幕上插入相同的“小div”，即“小div”。) The problem is that everytime I resize the window the Small Div keeps being added over and over and I want it to be added only once.(问题是，每次我调整窗口大小时，都会不断添加Small Div，而我只希望添加一次。)

Please note that I'm looking for a JS or jQuery solution.(请注意，我在寻找JS或jQuery解决方案。)

Regards.(问候。)

 var smallDiv = '<div class="small">Small Div</div>'; function moveDiv() { if ($(window).width() < 800) { $(smallDiv).insertBefore(".large"); } else { $(smallDiv).insertAfter(".medium"); } } moveDiv(); $(window).resize(moveDiv); <!-- begin snippet: js hide: false console: true babel: false --> 

 .large { width: 100%; height: 80px; background-color: darkgray; } .medium { width: 100%; height: 50px; background-color: goldenrod; } .small { width: 100%; height: 30px; background-color: aquamarine; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="large">Large Div</div> <div class="medium">Medium Div</div> 

  ask by Nesta translate from so

Answer 1

Renlado's answers is missing part of the question.(Renlado的答案缺少问题的一部分。)

You can use flex-box as suggested and order elements using order property.(您可以按照建议使用flex-box，并使用order属性来订购元素。)

 .container { display: flex; flex-direction: column; } .container>div { order: 1 } .container>.small { order: 0; } @media only screen and (max-width: 800px) { .container .small { order: 2; } } 

 <div class="container"> <div class="large">Large Div</div> <div class="medium">Medium Div</div> <div class="small">Small Div</div> </div>