Ответственный макет сетки выпуск

Question

У меня есть сетка с четырьмя элементами сетки. При ширине рабочего стола, сетка будет так ...

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

Если браузер получает изменен до ~ 1023px или ниже, то я хотел бы макет, чтобы посмотреть, как это ...

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

Это все легкое peasy, но вот предостережение, высоты элементов сетки в первом примере должны быть одинаковыми, используя свойства display: table-cell или min-height; однако, когда мы попадаем в точку останова, то элемент сетки 100% должен стать элементом сетки автоматической высоты и не сохранять отображение: высоты таблиц.

Возможно ли это достичь без использования каких-либо javascript?

Answer 1

Вы хотите что-то вроде этого?

Попробуйте собственный код с различными размерами, снипп это 'XS' экран.

<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>