html - 反转内联 block 的顺序？

Question

截至目前，此设置并排对齐 2 个盒子，但当容器变小时，盒子会相互堆叠，正如上次帮助我的人创建的这个 jsfiddle 所见: http://jsfiddle.net/gW8r2/1/

我的问题是，是否可以颠倒它堆叠的顺序，以便当容器变得太小时，右边的盒子(蓝色)堆叠在左边盒子的顶部？

JSFiddle 上显示的代码

CSS:

.parent {
width: 100%;
height: 100%;
border: 1px solid green;
text-align: center;
}

.parent > div {
display: inline-block;
}

.a {
width: 100px;
height: 100px;
background: red;
}

.b {
width: 200px;
height: 100px;
background: blue;
}

HTML

<div class="parent">
<div class="a"></div>
<div class="b"></div>
</div>

Answer 1

为什么不直接这样做呢？

@media screen and (max-width: 320px) {
   .parent{
      direction: rtl;
   }
}

#parent {
  width: 300px;
  height: 100px;
}

#div1,
#div2 {
  width: 49%;
  height: 100%;
  display: inline-block;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: blue;
}

@media all and (max-width: 320px) {
  #parent {
    direction: rtl;
  }
}

<div id="parent">
  <div id="div1"></div>
  <div id="div2"></div>
</div>