Responsive Grid Layout Problem

Question

Ich habe ein Rasterlayout mit vier Rasterelementen. Bei Desktop-Breite, würde das Gitter so sein ...

| 20% |  |  |  | 
|  |  | 20% |  | 
|  | 20% |  | 40% | 

Wenn der Browser auf ~ 1023px oder unterhalb der Größe verändert wird, dann würde ich das Layout mag so aussehen ...

|  | 33% |  | 
|  |  | 33% | 
| 33% |  |  | 
--------------------------- 
|   100%   | 

Dies ist alles leicht peasy, aber hier ist der Vorbehalt, die Höhen der Rasterelemente im ersten Beispiel müssen einheitlich sein, also mit Anzeige: Tabellenzellen- oder Mindesthöheneigenschaften; Wenn wir jedoch den Haltepunkt erreichen, sollte das 100% Rasterelement ein automatisches Höhenrasterelement werden und nicht die Anzeige: Tabellenzellenhöhe beibehalten.

Ist das überhaupt möglich ohne irgendeine Art von Javascript zu erreichen?

Answer 1

Wollen Sie etwas wie dieses?

Versuchen Sie in Ihrem eigenen Code mit verschiedenen Größen, Schnipsel ist ein 'XS' Bildschirm.

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-xs-4 col-sm-4 col-md-2" style="background-color:red;"> 
 
    Div1 
 
</div> 
 
<div class="col-xs-4 col-sm-4 col-md-2" style="background-color:blue;"> 
 
    Div2 
 
</div>  
 
<div class="col-xs-4 col-sm-4 col-md-2" style="background-color:yellow;"> 
 
    Div3 
 
</div> 
 
<div class="col-xs-12 col-sm-12 col-md-6" style="background-color:pink;"> 
 
    Div4 
 
</div>