Menu
I want change a div element's position [in the viewed document order] by media query.
<div>1</div>
<div>2</div>When I change my viewport then I want to div_1 stay under the div_2. Basically div_1 on the top. But I want change it by Media query. Can it is possible??
639
You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries.
Each media feature expression must be surrounded by parentheses. Logical operators can be used to compose a complex media query: not , and , and only . You can also combine multiple media queries into a single rule by separating them with commas.
Use flexbox and its order property
I recommend a .wrapper, though you can use it on the body as well and get the same result
@media screen and (max-width: 800px) {
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper div:first-child {
order: 1;
}
}<div class="wrapper">
<div>1</div>
<div>2</div>
</div>If flexbox isn't an option, you can use display: table
@media screen and (max-width: 800px) {
.wrapper {
display: table;
width: 100%;
}
.wrapper div:nth-child(1) {
display: table-footer-group;
}
}<div class="wrapper">
<div>1</div>
<div>2</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
