Change Div Order on Responsive Design

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>

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.

Re-order divs for responsive design

You have already a property in CSS called order, and it is available in flex display.

Set the container to

.wrap {
    display: flex;
    flex-wrap: wrap;
}

Then you can set the order 3 to two

.two {
    order: 3;
}

And that is it !

demo

Support isn't very high, but it is coming (Firefox should release flex-wrap support this month)

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>

Reorder divs with responsive in Bootstrap 5.0

The easiest way would be to "disable" flexbox on specific breakpoints which will allow the floats to work. This can be done using all Bootstrap 5 classes so there's no extra CSS...

<div class="container">
    <div class="row g-3 d-flex d-md-block">
        <div class="col-md-6 float-start">
            <div class="card card-body">A</div>
        </div>
        <div class="col-md-6 float-end">
            <div class="card card-body tall">C</div>
        </div>
        <div class="col-md-6 float-start">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

Floats in Bootstrap 5 demo

Alternately, you can use the new CSS-grid classes in Bootstrap 5. However this requires that you $enable-cssgrid with SASS:

<div class="container">
    <div class="grid">
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">A</div>
        </div>
        <div class="g-col-md-6 g-col-12" style="grid-row: span 2;">
            <div class="card card-body tall">C</div>
        </div>
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

CSS grid demo

Related: Bootstrap with different order on mobile version

How to change order of elements when device is mobile

Using Flexbox, you can use order.

.container{
  display:flex;
}
.order-1{
  order:1;
}
.order-2{
  order:2;
}
.order-3{
  order:3;
}
@media(min-width:992px){
  .order-lg-1{
    order:1;
  }
  .order-lg-2{
    order:2;
  }
  .order-lg-3{
    order:3;
  }
}

<div class="container">
  <div class="order-3 order-lg-2">A</div>
  <div class="order-2 order-lg-1">B</div>
  <div class="order-1 order-lg-3">C</div>   
</div>