将flex-end元素与其容器的底部和左侧对齐

Question

我是Flexbox和CSS的新手。在这里，我试图将底部Collapse div对齐到底部和左侧。我试过align-self: flex-end;，但是它把它放在了右边的底部。我会很感激任何帮助/想法将其移至底部和左侧？

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

.header {
  background: tomato;
  flex: 1 100%;
  font-weight: bold;
  text-align: center;
  margin: 0.1em;
}

.footer {
  background: lightgreen;
  flex: 1 100%;
  font-weight: bold;
  text-align: center;
  margin: 0.1em;
}

.main {
  background: deepskyblue;
  margin: 0.1em;
}

.aside-1 {
  background: gold;
  justify-content: left;
}

.aside-2 {
  background: hotpink;
  justify-content: right;
}

.aside {
  margin: 0.1em;
  display: flex;
  text-align: center;
  font-weight: bold;
  display: flex;
}
.inline-icon {
  vertical-align: bottom;
  font-size: 18px
}

.collapse {
  display: none;
}

@media all and (min-width: 400px) {
  .content {
    flex-direction: row;
    justify-content: left;
  }
  .aside-1 {
    order: 1;
  }

  .aside {
    flex-basis: 10%;
  }
  .main    {
    order: 2;
    flex-basis: 80%;
  }
  .aside-2 {
    order: 3;
  }
  .footer  { order: 4; }

  .collapse {
    align-self: flex-end;
    display: flex;
    white-space: nowrap;
  }

}

body {
  flex-direction: column;
  display: flex;

}

<head>
  <meta charset="utf-8">
  <title>Template</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <header class="header">Header</header>
 <div class="content">
     <article class="main">
       <p><b>Main Content</b><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     </article>
     <aside class="aside aside-1">
       Aside 1
       <div class="collapse">
         <i class="inline-icon material-icons">arrow_back</i> Collapse
       </div>
     </aside>
     <aside class="aside aside-2">Aside 2</aside>
 </div>
 <footer class="footer">Footer</footer>
</body>

编辑：请使用400px的min-width。低于此div正确隐藏。对不起，我之前没有提过这件事。

其他问题：

反正是否有箭头和折叠文本水平对齐
为什么右边的旁边也是左对齐的。我有justify-content: right;？