Я включил Bootstrap 4 в свой проект, но также использую свой собственный css. У меня есть прайс-лист, который показывает три варианта цены в середине экрана. Я использую поплавки и очищает. Я хочу, чтобы столбцы рухнули на 962px. Он не падает до 100%, пока не достигнет 500px. Похоже, что он использует свои собственные точки останова. Так что мой вопрос: сталкивался ли кто-нибудь с чем-то подобным. Заранее спасибо. Изображения и код ниже.
index. html (да, я включил метатег для viewport et c.)
<div class="wrapper-red store-backdrop">
<div class="container-fluid mb-5">
<h2 class="pt-5 nuestros-clientes text-center">ELIJE EL MEJOR PLAN</h2>
<div class="text-center">
<i class="fa fa-2x fa-star text-white" aria-hidden="true"></i>
</div>
<div class="container p-4">
<p class="pt-3 light text-white">Tenemos planes que se ajustan a tus necesidades. ¡Prueba uno y si te
agrada, puedes escalar a los demás!
</p>
</div>
<div class="container">
<div class="row">
<div class="column2">
<div class="bg-white shadow rounded p-3 mt-4 text-center">
<h4 class="pt-1">Clase Grupal</h4>
<h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$50</span>
</h1>
<p>Mensuales</p>
<hr>
<p>2 clases de 1 hora por semana</p>
<p>6 Alumnos Máximo por Clase</p>
<p>Maestro Nativo
</p>
<p>Clases Conversacionales
</p>
<p>Inicio de clases cada 1er día hábil del mes</p>
<p>Sujeto a disponibilidad</p>
<p>Horario fijo</p>
<div class="button-holder mb-4">
<button type="button" class="btn .btn-lg bg-grey btn-outline-secondary mt-5 p-3"><span
style="font-size: 20px;">¡Inscríbete hoy!</span></button>
</div>
</div>
</div>
<div class="column2 middle">
<div class="text-center bg-white shadow rounded p-3" style="height: 830px;">
<h4 class="pt-1">Clase Individual</h4>
<h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$130</span>
</h1>
<p>Mensuales</p>
<hr>
<p>2 clases de 1 hora por semana</p>
<p>Clases Uno a Uno (Particulares) </p>
<p>Maestro Nativo</p>
<p>Clases con Método y Nivel</p>
<p>Horario Fijo</p>
<p class="mb-5 pb-5">Inicio de clases cada 15 días</p>
<div class="button-holder mt-5 mb-5">
<button type="button" class="btn btn-lg bg-grey btn-danger mt-5 p-3"><span
style="font-size: 20px;">¡Inicia tus clases ya!</span>
</button>
</div>
</div>
</div>
<div class="column2">
<div class="text-center bg-white shadow rounded p-3 mt-4">
<h4 class="pt-1">Clase Premier</h4>
<h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$300</span>
</h1>
<p>Mensuales</p>
<hr>
<p>3 clases de 1 hora por semana
</p>
<p>Clases Uno a Uno (Particulares) </p>
<p>Maestro Nativo</p>
<p>Clases Conversacionales o por Nivel
</p>
<p>Inicio de clases inmediato</p>
<p>Horario flexible</p><br><br>
<div class="button-holder mb-4">
<button type="button" class="btn .btn-lg bg-grey btn-outline-secondary mt-5 p-3"><span
style="font-size: 20px;">¡Avanza hoy!</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
style. css
.store-backdrop {
background-image: url(../assets/img/backdropFull.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 5px 5px 5px 5px;
width: 100%;
}
.column2 {
float: left;
width: 33.33%;
}
.row2:after {
content: "";
display: table;
clear: both;
}
.middle {
z-index: 1;
}
@media screen and (max-width: 962px) {
.column2 {
width: 100%;
float: none;
}
}
По сути, я хочу изменить расположение трех столбцов на отдельные элементы, размещенные в 962px. Еще раз спасибо за помощь в этом. Приветствия.