基于与@Paulie_D的评论和讨论，这里有一个只使用css的解决方案。
它利用了这样一个事实，即当屏幕很小时，你可以使用display: contents来逻辑地展开项目，以及你可以通过order: X来设置元素顺序的位置（都是在css中）。

.outer {
  display: flex;
  flex-direction: row;
}

.inner {
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 720px){
  .inner {
    display: contents;
  }
  .outer {
    flex-direction: column;
  }
}

<div class="outer">
  <div class="inner">
    <div id="a1" style="order:1"> A1
    </div>
    <div id="a2" style="order:4"> A2
    </div>
    <div id="a3" style="order:5"> A3
    </div>
    <div id="a4" style="order:7"> A4
    </div>
  </div>
  <div class="inner">
    <div id="b1" style="order:2"> B1
    </div>
    <div id="b2" style="order:3"> B2
    </div>
    <div id="b3" style="order:6"> B3
    </div>
  </div>
</div>