为什么正确的内容不会直接在下一个div下叠加？

Question

如何在其上方的div下创建.right-content堆栈？ 我使用flex和flex-basis进行此布局，我意识到如果left-content太长，则第二个div {{1 （社交图标）将被推下并且不会在持有相同类的第一个div下堆叠。试图让代码尽可能短。

You can see this link

或者查看下面的代码：

＆＃13;

＆＃13;

.right-content

＆＃13;

div {
  border: 1px solid
}

.wrap {
  margin: 0 auto;
  max-width: 800px;
  overflow: hidden;
}

.content {
  display: flex;
  flex-flow: row wrap;
  margin-left: auto;
  margin-right: auto;
  align-items: flex-start;
  width: 100%;
}

.left-content {
  flex-basis: 65%;
}

.right-content {
  flex-basis: 33%;
  margin-left: auto;
  margin-right: 0;
}

＆＃13;

＆＃13;

＆＃13;