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.

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.

• javascript
• html
• css
• zurb-foundation

• can you use bootstrap? – Nabeel Khan Commented Feb 7, 2017 at 17:12

3 Answers 3

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){
    #puter{
        display: none;
    }
    #phone{
        display: block;
    }
}

You can then have 2 x html sections for both puters / smartphones for example (If you'd like to have big differences in structure etc. between devices)

Good read on media queries - http://www.adobe./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>