I would like to move my <aside> element below my main element when I hit a certain breakpoint, but am unsure as to what feature of flexbox I can use to achieve it. I've included a code snippet that should be pretty easy to understand. Any idea's?

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
}

main {
  flex: 2;
  background-color: #181818;
  color: white;
  padding: 5px;
  min-height: 50vh;
}

aside {
  flex: 1;
  background-color: #ddd;
  padding: 5px;
}

<div class="wrapper">
  <main>Main content here</main>
  <aside>Secondary content here</aside>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use the flex-direction property in a media query

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
}

main {
  flex: 2;
  background-color: #181818;
  color: white;
  padding: 5px;
  min-height: 50vh;
}

aside {
  flex: 1;
  background-color: #ddd;
  padding: 5px;
}

@media (max-width: 768px) {
  .wrapper {
    /* Changes from row to column */
    flex-direction: column;
  }
}

<div class="wrapper">
  <main>Main content here</main>
  <aside>Secondary content here</aside>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

try display:flex; flex-wrap:wrap;