I am using flexbox order to change the order of a set of 3 div blocks on a page.

I have been able to successfully change the order however can't seem to get the 100% width to work and everything still remains on the same line. Any insight would be gratefully appreciated.

.container {
  display:flex;
  text-align:center;
  color:white;
}
.prev {
    order: 2;
  background:red;
  height:50px;
  width:50%;
  }
  .next {
    order:3;
  width:50%;
  background:red;
  height:50px;
  }
  .content {
    order: 1;
    width:100%;
  background:black;
  height:50px;
  }

@media screen and (min-width:1920px) {
  .prev {
  order: 1;
  width:25%;
}
.next {
  order:3;
  width:25%;
}
.content {
  order: 2;
  width:50%;
}
}

<div class="container">
  <div class="prev">
    Previous
  </div>
  <div class="next">
    Next
  </div>
  <div class="content">
    Content
  </div>
</div>

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

when the viewport is 1920 I want the order of div's to go prev,content,next all on one row, when below that breakpoint I would like to change the order to content,prev,next (this is currently functioning) I would also like to have the content div span 100% width forcing the previous,next div's to move below to a new row.

CodePudding user response：

Assuming you have fixed the issue with changing order on specific breakpoint, to move "next" and "prev" items below, you can do the following (you would probably need to change order depending on breakpoint):

Set flex-wrap: wrap property on .container { selector

.container {
    flex-wrap: wrap;
}

Add width: 100%; property on .content {

.content {
    width: 100%;
}

And then adjust .prev { and .next { selectors as needed, or set them to flex: 1 to be equal width.

.prev, .next {
    flex: 1;
}