Div re-order with CSS
Depending on what browsers you need to support you could use the flex-box
. Using a media query for screen size you could then set the order
of the second and third boxes to switch below a certain screen width.
I've done a pen with a short example. I'd also recommend the CSS Tricks Complete Guide to Flexbox which talks about how to use flex
far better than I can.
EDIT:
The basic principle would be to set the parent element (e.g., container) to display: flex
; this generates the flexbox and allows you to set different parameters for the children.
Using the following HTML:
<div class="container">
<div class="box first">
Box 1
</div>
<div class="box second">
Box 2
</div>
<div class="box third">
Box 3
</div>
</div>
If I set display:flex
on .container
, I can then set whether the content should display in a row or column, should wrap down a line, have space between or around the elements, etc. I've set the main rule to be a wrapping row using flex-flow (which is a shorthand for two other flex properties, including flex-direction
which I need later), with space between the elements.
.container{
display:flex;
flex-flow: row wrap;
justify-content:space-between;
}
I then use a media query so when the browser is narrower than a specified width, the flex-direction
gets changed from row
to column
@media screen and (max-width:600px){
.container {
flex-direction:column
}
}
Then, in the same media query, I need to tell the elements that I want to re-order what order they should be in:
@media screen and (max-width:600px){
.container {
flex-direction:column
}
.second{
order: 3;
}
.third{
order: 2
}
}
Sometimes I've noticed that order
needs to be defined for all the elements, so you might need to set it for the first block and keep it as order: 1
. From the pen linked to above, it doesn't seem to be the case here, but it something to keep an eye out for in other projects.
CSS layout, use CSS to reorder DIVs
It might not exactly match what you're after, but take a look at this question:
CSS positioning div above another div when not in that order in the HTML
Basically, you'd have to use Javascript for it to be reliable in any way.
change order of divs without using grid or flex
You could wrap your fetch_array ($query)
in a array_reverse()
:
while ($row = array_reverse( fetch_array($query) ) )
That will return the results in the reverse order and will give you what you want. No need for CSS or JS.
Reordering of Divs
There is no catch-all way of reordering elements with css.
You can inverse their order horizontally by floating them all to the right. Or you can position them absolutely relative to the body or some other containing element - but that comes with severe limitations regarding the size of the elements, and positioning relative to other elements on the page.
Short answer: You can only achieve this in a very limited set of circumstances. Reordering elements is best done in markup.
If you have no control over the html, you could use javascript. Here using jQuery:
$("#div2").insertAfter("#div3");
$("#div1").prependTo("#div2");
I certainly don't recommend that unless your hands are tied. It will be harder to maintain, and for your end users it will make your page "jerk around" while its setting up the page.
Can we reorder elements when they are present inside different parents?
You can make use of CSS Grid. I played around with a Grid Generator here. Please use full screen mode to view the output.
Note: If anyone can reduce this code, please do since I just dived into CSS Grid.
JSfiddle Demo
.container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; grid-column-gap: 10px; grid-row-gap: 10px; height: 500px;}
.div1 { grid-area: 1 / 1 / 3 / 3; background: #00A2E8;}
.div2 { grid-area: 3 / 1 / 5 / 3; background: #22b14c;}
.div3 { grid-area: 1 / 3 / 5 / 5; background: #ED1C24;}
@media ( max-width: 600px) { .div1 { grid-area: 1 / 1 / 2 / 5; } .div2 { grid-area: 4 / 1 / 5 / 5; } .div3 { grid-area: 2 / 1 / 4 / 5; }}
/* Additional styles */
.container>div { color: #fff; font-size: 2em; display: flex; justify-content: center; align-items: center;}
<div class="container"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div></div>
Related Topics
How to Place Div in Top Right Hand Corner of Page
Table With Fixed Header and Fixed Column on Pure CSS
How to Make the Height of the Div Dynamically Fit the Size of the Div in Which It Is Contained
How to Make Custom Dots in Owl Carousel
Multiple Select Dropdown Not Working With Ng-Option
Make Div (Height) Occupy Parent Remaining Height
How to Remove Button Style or Overwrite Dynamically Added Classes to Button in Material2
Angular, Image Not Found (Get 404)
Html/Css - Make Alert Disappear After a Few Seconds
How to Clear Input Field After Submitting Data in Angular
How to Embed HTML Formatting Inside of a <Textarea> Tag
Div Elements Overlapping Each Other
How to Avoid Page Break Inside Table Row for Wkhtmltopdf
Make Container Shrink-To-Fit Child Elements as They Wrap
How to Limit the Visible Options in an HTML <Select> Dropdown
How to Disable Auto-Play for Local Video in Iframe