CSS Layout, Use CSS to Reorder Divs

CSS layout, use CSS to reorder DIVs

It might not exactly match what you're after, but take a look at this question:

CSS positioning div above another div when not in that order in the HTML

Basically, you'd have to use Javascript for it to be reliable in any way.

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.

How to reorder CSS Flexbox

Just add this

  .item:nth-child(2n - 1) {
    order: -1;
  }

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

.item {
  flex: 1 0 50%;
}

@media only screen and (max-width: 520px) {
  .item {
    flex: 100%;
  }

  .item:nth-child(2n - 1) {
    order: -1;
  }
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
</div>

body, html {  margin: 0;  padding: 0;}
.product-view {  display: flex;  flex-flow: row wrap;}
.box-additional1, .box-additional2 {  width: 100%;  height: 100px;  flex-basis: 100%;}
.box-additional1 {  background: red;}
.box-additional2 {  background: darkRed;}
@media screen and (min-width: 640px) {    .box-additional1 {    order: 2;  }    .box-additional2 {    order: 1;  }}

<div class="product-view"> <form action> </form> <div class="box-additional1"></div> <div class="box-additional2"></div></div>

.allitem {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

function App() {
  return (
    <div className="allitem">
      <div className="item1">
        <h3>test1</h3>
      </div>

      <div className="item2">
        <h3>test2</h3>
      </div>

      <div className="item3">
        <h3>test3</h3>
      </div>

      <div className="item4">
        <h3>test4</h3>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

.allitem {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

.container {  display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  grid-template-rows: 1fr 1fr 1fr 1fr;  grid-column-gap: 10px;  grid-row-gap: 10px;  height: 500px;}
.div1 {  grid-area: 1 / 1 / 3 / 3;  background: #00A2E8;}
.div2 {  grid-area: 3 / 1 / 5 / 3;  background: #22b14c;}
.div3 {  grid-area: 1 / 3 / 5 / 5;  background: #ED1C24;}
@media ( max-width: 600px) {  .div1 {    grid-area: 1 / 1 / 2 / 5;  }  .div2 {    grid-area: 4 / 1 / 5 / 5;  }  .div3 {    grid-area: 2 / 1 / 4 / 5;  }}

/* Additional styles */
.container>div {  color: #fff;  font-size: 2em;  display: flex;  justify-content: center;  align-items: center;}

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

    #blockContainer {        display: -webkit-box;        display: -moz-box;        display: box;                -webkit-box-orient: vertical;        -moz-box-orient: vertical;        box-orient: vertical;    }    #blockA {        -webkit-box-ordinal-group: 2;        -moz-box-ordinal-group: 2;        box-ordinal-group: 2;    }    #blockB {        -webkit-box-ordinal-group: 3;        -moz-box-ordinal-group: 3;        box-ordinal-group: 3;    }

    <div id="blockContainer">        <div id="blockA">Block A</div>        <div id="blockB">Block B</div>        <div id="blockC">Block C</div>    </div>