How to Specify an Element After Which to Wrap in CSS Flexbox

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

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/

How to specify when element should wrap with flexbox?

You could use min-width on the blocks. This means they will fully stretch, but when the screen size limits them to being 200px in this example, that breakpoint will lead them to wrap, and their width will never go below 200px.

Another option is to just apply flex-wrap: wrap; on that specific breakpoint you want with a media-query.

For further control, you could also look into flex-basis: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

EDIT: Responsive image

Genereally it's good to include this line of code on most images: max-width: 100%; height: auto; as this will make images auto-responsive. max-width: 100%; forces the image to never overflow from its container, and height: auto; adjusts the images height so its aspect ratio is correct. Try dragging the screen size and you will see its effect :)

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.block1,
.block2 {
  min-width: 200px;
}

.block2 img {
  max-width: 100%;
  height: auto;
}

<div class='flex-row'>

  <div class="block1">

    <h2>Some title</h2>
    <p>Some text</p>
  </div>


  <div class="block2">

    <img src="http://via.placeholder.com/350x350" />

  </div>


</div>

.icon {
  order: 0 !important;
 }
.username {
  order: 1 !important;
  width: 100%;
  margin: 15px;
}
.search {
  order: 2 !important;
  width: 100%;
}

.bar-2 {
  .username {
    order: 2;
  }
}
.icon-3 {
  order: 3;
}

* {  box-sizing: border-box;}
.container {  display: flex;  flex-wrap: wrap;}
.container div {  padding: 10px;  border: 5px solid #fff;  background: gray;  text-align: center;}
.first_container {  width: 70%;  order: 1;}
.second_container {  width: 100%;  order: 3;}
.third_container {  width: 30%;  order: 2;}

<div class="container">  <div class="first_container">1</div>  <div class="second_container">2</div>  <div class="third_container">3</div></div>

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

mat-card {
  margin: 10px;
  min-width: 300px;
  flex-grow: 1;
}