Как эмулировать адаптивность адаптера бутстрапа

Question

У меня есть два встроенных div, которые разделяют родительский контейнер. Ширина divs составляет 49%, чтобы выровнять их по горизонтали. Я хотел бы сделать это после того, как родительский контейнер будет изменен до определенной ширины. Оба из div действуют так, как если бы они были блочными элементами, которые занимают новую строку и занимают 100% контейнера. Я бы не хотел использовать bootstrap, так как это единственная функция, которая мне нужна, и это кажется довольно легким для подражания, просто нужно некоторое понимание. Вот основная схема

<div class="container"> 
    <div class="cell"> 

    </div> 
    <div class="cell"> 

    </div> 

</div> 

Answer 1

Принцип прост:

.container > div { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
@media (max-width: 800px) { 
 
    .container > div { 
 
    width: 100%; 
 
    float: none; 
 
    } 
 
} 
 

 
/* the css from this point on is not important, i just added it for clarity */ 
 

 
.container > div { 
 
    text-align: center; 
 
    background-color: #eee; 
 
    border: 1px solid white; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="cell"> 
 
    First cell 
 
    </div> 
 
    <div class="cell"> 
 
    Second cell 
 
    </div> 
 
</div>

800px является точкой, где изменения макета. У вас может быть столько запросов @media, сколько хотите. Вот полный список media features, который вы можете использовать.