Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="body">
  <div class="parent">
    <div class="first child">First</div>
    <div class="second child">
      <div class="items">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div>
    </div>
    <div class="third child">Third</div>
  </div>
</div>
<br>
<div class="body re-order--table">
  <div class="parent">
    <div class="first child">First</div>
    <div class="second child">
      <div class="items">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div>
    </div>
    <div class="third child">Third</div>
  </div>
</div>
<br>
<div class="body re-order--box">
  <div class="parent">
    <div class="first child">First</div>
    <div class="second child">
      <div class="items">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div>
    </div>
    <div class="third child">Third</div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.12)
// Compass (v1.0.0.alpha.21)
// ----

.body {
  background-color: lightgrey;
  width: 320px;
  overflow: scroll;
}

.second {
  overflow: hidden;
  width: 100%;
}

.items {
  width: 400px;
}

.item {
  background-color: lightblue;
  width: 100px;
  float: left;
}

.re-order--table {
  .parent {
    display: table;
  }
  .first {
    display: table-footer-group;
  }
}

// http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css?answertab=votes#tab-top
.re-order--box {
  .parent {
    display: -webkit-box;
    display: -moz-box;
    display: box;
  
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
  }
  .first {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
  }
}

SassMeister-output.css

.body {
  background-color: lightgrey;
  width: 320px;
  overflow: scroll;
}

.second {
  overflow: hidden;
  width: 100%;
}

.items {
  width: 400px;
}

.item {
  background-color: lightblue;
  width: 100px;
  float: left;
}

.re-order--table .parent {
  display: table;
}
.re-order--table .first {
  display: table-footer-group;
}

.re-order--box .parent {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
.re-order--box .first {
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  box-ordinal-group: 3;
}

SassMeister-rendered.html

<div class="body">
  <div class="parent">
    <div class="first child">First</div>
    <div class="second child">
      <div class="items">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div>
    </div>
    <div class="third child">Third</div>
  </div>
</div>
<br>
<div class="body re-order--table">
  <div class="parent">
    <div class="first child">First</div>
    <div class="second child">
      <div class="items">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div>
    </div>
    <div class="third child">Third</div>
  </div>
</div>
<br>
<div class="body re-order--box">
  <div class="parent">
    <div class="first child">First</div>
    <div class="second child">
      <div class="items">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div>
    </div>
    <div class="third child">Third</div>
  </div>
</div>

http://sassmeister.com/gist/c670a30d5f5c238bdaaa