All geek questions in one place

Change Div Order to Responsive Design

I create a responsive website design.

Basically, when the view port is below X, I want to show the menu at the bottom of the page.

LINK DEAD Example - A SITE SHOULD NEVER OWN ME

IF you change the size of your browser window, you will see 3 different projects (based on the design of the final goals, not the types of devices).

V1: greater than 999px, you will see a red square in the upper left, a blue square next to the red field.

V2: between 600px and 999px, you will notice that the red box is getting smaller, the blue box is now sitting under the red box

v3: less than 600 pixels, you will notice that again the red box is getting smaller, the blue box is now yellow.

Basically, in V3 I want to make a yellow frame now, sit under a green frame, above a gray frame

so the order goes Red box Green box Yellow box Gray box

Besides the nasty hidden old div, show the new div hack (technique) or the JS version (moving away from CSS Responsive) Is there a way to move this.

CSS is inside the file, so the view source shows everything.

Greetings

+4
source share
9 answers

I honestly can't think of a way to do this only in CSS, but it is easily doable in jQuery without breaking your responsive design. Your CSS does not need to be changed except to remove the top edge from the # top-links div.

<script type="text/javascript"> $(document).load($(window).bind("resize", listenWidth)); function listenWidth( e ) { if($(window).width()<600) { $("#topLinks").remove().insertAfter($("#content")); } else { $("#topLinks").remove().insertBefore($("#content")); } } </script>
+11
source

I just implemented a solution from

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

which uses display: table-header-group; and display: table-footer-group;

Here is my example for two horizontal 50% width blocks that switch directly above the left margin when decreasing the window width:

 .box-container { display: table; } .box-50 { width: 50%; display: table-cell; padding: 0 20px; } @media only screen and (max-width : 700px) { .box-container { display: block; } .box-50 { display: block; width: 100%; } /* http://www.jtudsbury.com/thoughts/rearrange-div-order.php */ .box-50.left { display: table-footer-group; } .box-50.right { display: table-header-group; } }
+5
source

Try maybe useful

  @media (min-width:1px) and (max-width:599px) { #pageFrame { width:100%; } #logo { margin:0 auto; width:50px; height:50px; } #topLinks { position:absolute; top:250px; float:right; width:100%; background-color:yellow; } #content { position:absolute; top:100px; clear:none; float:left; width:100%; } #footer { position:absolute; top:350px; clear:both; width:100%; }

Demo

+2
source

Flex-Box is the answer you are looking for. Check (this link is currently broken - http://www.jordanm.co.uk/lab/contentchoreography ) for a full explanation of all Flexbox features https://css-tricks.com/snippets/css/a-guide-to -flexbox /

+2
source

Yes, it is very simple to reorder the divs in the container. Please check out my working HTML css code.

 <html> <head> <style type="text/css"> #nav_bar{ width:100%; height:50px; background:red; } #container{ width:100%; height:500px; } #left_panel { position:relative; float:left; width:250px; border:0px solid black; background:#ccc; height:100%; } #right_panel{ width:100%; background:#666; height:100%; } #inner_container{ height:100%; } .center { margin-left: auto; margin-right: auto; width: 40%; padding-top:50px; } .data_container{ border:1px solid black; float:left; position:relative; padding:10px; } #footer{ width:100%; height:50px; background:blue; } @media all and (max-width: 700px) { #container { width: 100%; height: 500px; display: flex; flex-flow: column-reverse ; } #left_panel { width:100%; height:200px; } #right_panel{ width:100%; height:300px; } } </style> </head> <body> <div id="nav_bar">Nav</div> <div id="container"> <div id="left_panel"> <div class="center"> Left Panel content </div> </div> <div id="right_panel"> <div id="inner_container" class="center"> <div class="data_container"> Action Item 1 </div> <div class="data_container"> Action Item 2 </div> <div class="data_container"> Action Item 3 </div> </div> </div> </div> <div id="footer">Footer</div> </body> </html>
+2
source

Try creating two divs, one in the footer and one in the header, "display: none" the bottom, when the screen is smaller than X, show it.

+1
source

You should look at the direction css property. https://developer.mozilla.org/en-US/docs/Web/CSS/direction

What can you do:

  • direction: rtl; in the parent container: .container { direction: rtl; } .container { direction: rtl; }
  • reset is normal for direct children: .container > * { direction: ltr; } .container > * { direction: ltr; }
  • Reorder your divs in your HTML to display everything in the correct order on the desktop version

And this works in all browsers because this property is supported everywhere (from IE 5.5 ...).

0
source

using EventListener and matchMedia:

  //on load responsive_change_box_order(); //on resize window.addEventListener('resize', responsive_change_box_order ); function responsive_change_box_order() { if (window.matchMedia("(max-width: 1118px)").matches) { jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content")); } else{ jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner")); } }
0
source

If you are using Bootstrap 4, I created a simple plugin to check the current breakpoint of a media query and then set it as a variable.

Then you can do something like

  if ( xs == true ) { $("#topLinks").remove().insertAfter($("#content")); }

You can get it here: https://jacoblett.imtqy.com/IfBreakpoint/

0
source

Source: https://habr.com/ru/post/1440280/

More articles:


All Articles