Change Div Order With CSS Depending on Device-Width

Change div order with CSS depending on device-width

This is doable in CSS thanks to the wonderful flexbox spec. Using the order and flex-flow properties, we can achieve what you want. Unprefixed, IE11 and all evergreen browsers will support this. IE10 prefixes -ms-order and doesn't support flex-flow.

The solution takes into consideration all the constraints you listed:

Have a list of elements in a given order displayed as a row.
When the window is too small, change them to display in a column.
Change the order of the elements when they are displayed in a column.

Because of the limitations of Stack Snippets, you'll need to view the demo in Full page mode, and resize your browser to see the effect.

.container div {    width: 100px;    height: 50px;    display: inline-block;}
.one { background: red; }.two { background: orange; }.three { background: yellow; }.four { background: green; }.five { background: blue; }
@media screen and (max-width: 531px) {    .container { display: flex; flex-flow: column; }    .five { order: 1; }    .four { order: 2;  }    .three { order: 3; }    .two { order: 4; }    .one { order: 5 }}

<div class="container">    <div class="one">I'm first</div>    <div class="two">I'm second</div>    <div class="three">I'm third</div>    <div class="four">I'm fourth</div>    <div class="five">I'm fifth</div></div>

Change div order and alignment based on screen size

I would recommend using a grid and media queries like below.

.main {
  display: grid;
  grid-template-areas: 'div2' 'div1' 'div3';
}

.div1 {
  grid-area: div1;
}

.div2 {
  grid-area: div2;
}

.div3 {
  grid-area: div3;
}

@media only screen and (min-width: 800px) {
  .main {
    grid-template-areas: 'div1 div2' '. div3';
  }
}

<div class="main">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

change div order at screen sizes

I think the better solution is with flexbox or if you use Bootstrap with pull and push classes but there is another interesting solution:

.first,.second {  background: #ccc;  text-align: center;  margin: 5px 0;}@media(max-width:820px) {  .container {    display: table;    border-spacing: 0 5px;    width: 100%;  }  .first {    display: table-row-group;  }  .second {    display: table-header-group;  }}

<div class="container">  <div class="first">1</div>  <div class="second">2</div></div>

Change the width of a div depending on the device

You are looking for media query, read more about it here. If you are curious knowing different view widths, you can refer to this:-

320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more — Extra large screens, TV

You can use responsive units to set widths, like 100% or 100vw, know more about responsive units here.

Change order of html element depending on screen size

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>

How can I move a div from top to bottom on mobile layouts?

This can be achieved using CSS' flexbox.

Add a new selector .col-xs-12 with the following properties:
- display: flex; tells the children to use the flexbox model
- flex-direction: column-reverse; will ensure that the children flow from bottom to top (instead of the default left to right)

Run the below Snippet in full screen and resize the window to see the order of the elements change.

@media only screen and (max-width: 960px) {  .col-xs-12 {    display: flex;    flex-direction: column-reverse;  }}

<div class="row">  <div class="col-xs-12">    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>  </div></div>

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.

Change Div Order With CSS Depending on Device-Width