CSS: How can I ensure flex items wrap to the next line--after the first item--at a certain screen width?

Question

I have four HTML elements displayed on a single line using CSS flexbox (codepen here). At a certain screen width (e.g. 800 px), I would like to ensure the first element displays on one line, while the remaining three elements wrap to the next line (as in this screenshot). Can I accomplish that with a CSS media query and/or additional HTML? If so, what is the proper way of doing so? My existing code is below:

HTML

<div class="cart-cb">
  <div>Continue Browsing</div>
  <button>Property For Sale</button>
  <button>Land For Sale</button>
  <button>Villa Rentals</button>
</div>

CSS

.cart-cb {
  display:flex;
  justify-content: flex-end;
  width: 100%
}

Answer 1

Use the media query to apply flex-wrap:wrap on the flex container and flex:0 0 100% on the first child.

This way you don't need additional HTML markup, and no need to change anything on your code but the media query.

@media (max-width: 800px) {
  .cart-cb{
    flex-wrap:wrap;
  }
  .cart-cb div{
    flex: 0 0 100%;
    text-align:right;
  }
}

https://jsfiddle.net/378b4yLy/

Answer 2

You could change its initial width with the flex-basis: 100% to occupy the whole row when the break happens:

.cart-cb {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap; /* enables wrapping */
  /*width: 100%; by default*/
}

@media screen and (max-width: 800px) {
  .cart-cb > div:first-child {
    flex-basis: 100%;
    text-align: right;
  }
}

<div class="cart-cb">
  <div>Continue Browsing</div>
  <button>Property For Sale</button>
  <button>Land For Sale</button>
  <button>Villa Rentals</button>
</div>

Answer 3

You could wrap the buttons in a container - that will keep them grouped together when the line wraps.

Also include flex-wrap property...

.cart-cb {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}

/* at 800px screen width force wrap */

@media (max-width: 800px) {
  .buttons {
    width: 100%;
    text-align: right;
  }
}

<div class="cart-cb">
  <div>
    Continue Browsing
  </div>
  <div class="buttons">
    <button>Property For Sale</button>
    <button>Land For Sale</button>
    <button>Villa Rentals</button>
  </div>
</div>

Answer 4

Try this code Check Demo https://jsfiddle.net/JentiDabhi/s48r3ere/

HTML

<div class="cart-cb">
  <div class="label-div">
      Continue Browsing
  </div>
  <button>Property For Sale</button>
  <button>Land For Sale</button>
  <button>Villa Rentals</button>
</div>

CSS

.cart-cb {
    display: flex;
    justify-content: flex-end;
    width: auto;
    flex-wrap: wrap;
    float: right;
}
div.label-div {
    display: block;
    flex: 100%;
}
.cart-cb button{
  flex: auto;
}