Verwenden Sie hier die Flexbox. Ist es möglich, überlappende Elemente in voller Breite zu erstellen, nachdem sie ohne Medienabfragen nach unten gedrückt wurden?

Siehe beiliegenden Plunker:http: //plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh? p = preview Ändern Sie die Größe des Vorschaufensters auf weniger als 425 Pixel. Das dritte Element wird nach unten gedrückt und dann möchte ich es in voller Breite machen. Befindet es sich in derselben Zeile wie die anderen 2 Elemente, darf es nicht wachsen.

css:

.flexContainer {
    display:flex;
    flex-wrap:wrap;
    border: 1px solid;
  }
  .img {
    width:110px;
    height:110px;
    background:red;
  }
  .flexItem {
    flex-basis:200px;
    flex-grow:1;
    background:#ff1;
  }
  .wrapItem {
    flex-basis:100px;
    background:#aab;
  }

html:

<div class="flexContainer">
  <div class="img">fixed size img here</div>
  <div class="flexItem">This flexes</div>
  <div class="wrapItem">This wraps</div>
</div>