How do you change the order of html elements based on the size of the screen?
For example, on large screen like desktops, the order would be like this:
element1 element2 element3
However, when seeing this on phone, it wouldn't fit the width of the screen. So, I would like it to look like this:
element2
element1
element3
Since Div2 is the main div, I would like it to be on the middle on large screens and on top on smartphone screens.
I am using Foundation as the framework for the website.
Here's an example code:
<div id="container" class="row medium-up-3">
<div id="element1" class="column column-block">
</div>
<div id="element2" class="column column-block">
</div>
<div id="element3" class="column column-block">
</div>
</div>
I have spent a lot of time learning html and css so that's all I really know to make a website. I have been planning to learn javascript so it would be fine if the solution requires it.
Here's the CSS way, using flexbox (take a look at this guide to help you get started with flexbox):
flex-direction
is either row
or column
(depending on how you want your elements to flow)
Change their order with order
(using order: 1
on #element2 will put it at the end)
#container { display: flex; flex-direction: column; } #element2 { order: -1; }
<div id="container" class="row medium-up-3"> <div id="element1" class="column column-block"> #1 </div> <div id="element2" class="column column-block"> #2 </div> <div id="element3" class="column column-block"> #3 </div> </div>
Here's one way you could do it:
In CSS you can use a media query to display or hide content:
@media (max-width:632px){
#computer{
display: none;
}
#phone{
display: block;
}
}
You can then have 2 x html sections for both computers / smartphones for example (If you'd like to have big differences in structure etc. between devices)
Good read on media queries - http://www.adobe.com/devnet/archive/dreamweaver/articles/introducing-media-queries.html
You just simply use class medium-up-12 instead of class on container ID. Goo Luck.
<div id="container" class="row medium-up-12"> <div id="element1" class="column column-block"> #1 </div> <div id="element2" class="column column-block"> #2 </div> <div id="element3" class="column column-block"> #3 </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.