How to change side by side divs to stack on mobile?

Question

I am trying to get my 2 divs (which are side by side) to change to stacked divs when viewed on mobile as shown in the fiddle, but I would like "two to be on top and "one" to be second.

Here is the code - http://jsfiddle.net/d3d4hb3t/

.one {
  border: 1px solid green;
  width: 29%;
  float: left;
  height: 100px;
}

.two {
  border: 1px solid blue;
  width: 69%;
  float: right;
  height: 100px;
}

@media (max-width: 767px) {
  .one {
    width: 100%;
  }
  .two {
    width: 100%;
  }
}

<div class="one">one</div>
<div class="two">two</div>

I know the simple solution would be to swap divs one and two around, but since the code I have is complicated, I was hoping there was an easier solution using just CSS.

Costanzia

Swap the order of the divs in your HTML and it will work without changing any of your CSS - Demo... jsfiddle.net/d3d4hb3t/1 – Hovercraft

just swap, it will be easier than anything else. – Endothecium

Answer 1

Update

Added a flexbox approach below:

UPATED JSFIDDLE

.wrap {
  display: flex;
}

.one {
  width: 30%;
  border: 1px solid green;
}

.two {
  width: 70%;
  border: 1px solid blue;
}

@media (max-width: 767px) {
  .wrap {
    flex-direction: column-reverse;
  }
  .one,
  .two {
    width: auto;
  }
}

<div class="wrap">
  <div class="one">1</div>
  <div class="two">2</div>
</div>

Original answer

If you're stuck with the markup, you can still use the magic css table layout to change the order of the 2 divs. I updated it all, just to keep the consistency.

How those display values work, from MDN:

display: table; - behaves like <table> element.

display: table-cell; - behaves like <td> element.

display: table-header-group; - behaves like <thead> element.

display: table-footer-group; - behaves like <tfoot> element.

UPDATED JSFIDDLE

.wrap {
  display: table;
  border-collapse: collapse;
  width: 100%;
}

.one,
.two {
  display: table-cell;
}

.one {
  width: 30%;
  border: 1px solid green;
}

.two {
  width: 70%;
  border: 1px solid blue;
}

@media (max-width: 767px) {
  .one {
    display: table-footer-group;
    width: 100%;
  }
  .two {
    display: table-header-group;
    width: 100%;
  }
}

<div class="wrap">
  <div class="one">1</div>
  <div class="two">2</div>
</div>

Aberdeen

Answer 2

Considering that you don't want swap them. Here is the fiddle: https://jsfiddle.net/c8x49afg/ Just use position relative for divs pulling the second up and pushing the first down.

.one {
  border: 1px solid green;
  width: 29%;
  float: left;
  height: 100px;
}

.two {
  border: 1px solid blue;
  width: 69%;
  float: right;
  height: 100px;
}

@media (max-width:767px) {
  .one {
    position: relative;
    top: 110px;
    width: 100%;
  }
  .two {
    position: relative;
    top: -100px;
    width: 100%;
  }
}

<div class="wrapper">
  <div class="one">
    one
  </div>


  <div class="two">
    two
  </div>
</div>

Skyline

Answer 3

I have needed to do this exact thing when working in an enterprise CMS where the source order could not be changed on mobile.

The solution I have used is to set a general container for the two Divs and make that display as a table. You can then set the Div you want to show first as display:table-group-header and set the one to show after it as display:table-group-footer

If you want to keep the colored borders, you may have to introduce an inner div for each that holds your content.

I have created a Fiddle that shows it in action: http://jsfiddle.net/0brc4xc7/

Babyblueeyes

Answer 4

.wrap {
  display: flex;
}

.one {
  width: 30%;
  border: 1px solid green;
}

.two {
  width: 70%;
  border: 1px solid blue;
}

@media (max-width: 767px) {
  .wrap {
    flex-direction: column-reverse;
  }
  .one,
  .two {
    width: auto;
  }
}

<div class="wrap">
  <div class="one">1</div>
  <div class="two">2</div>
</div>

Kennard

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Mullen