如何使用媒体查询使多个列表折叠

Question

嗨，这里有第一次海报！

我正在制作一个网站，需要帮助如何在屏幕宽度缩小时使该部分可折叠。我想知道我可以在媒体查询中添加什么，这样框就不会水平显示，而是垂直显示，一个在另一张卡下面。

这是一张我试图使崩溃的部分的照片

<section id="prices" classes="bg-light">
<div class="container">
<h2 id="pricing-header">Our Rates<span class="text-primary"></span></h2>
<div class="boxes">
<div class="box">
<h3 id="price-Heading">Basic</h3>
<div class="icon-title">
<li> $50 </li>
</div>
<div class="icon-title">
<li> 1 page </li>
</div>
<div class="icon-title">
<li> 1 page </li>
</div>
<div class="icon-title">
<li> 1 page </li>
</div>
<div class="icon-title">
<li> 1 page </li>
</div>
<div class="icon-title">
<li> $50 </li>
</div>
<li class="icon-title"> $50 </li>
</div>
<div link class="box">
<h3 id="price-Heading">Standard</h3>
<div class="icon-title">
<li> $100 </li>
</div>
<div class="icon-title">
<li> $50 </li>
</div>
<div class="icon-title">
<li> $50 </li>
</div>
<div class="icon-title">
<li> $50 </li>
</div>
<div class="icon-title">
<li> $50 </li>
</div>
<div class="icon-title">
<li> $50 </li>
</div>
<li class="icon-title"> $50 </li>
</div>
<div link class="box">
<h3 id="price-Heading">Premuim</h3>
<div class="icon-title">
<li>$250</li>
</div>
<div class="icon-title">
<li> $50 </li>
</div>
<div class="icon-title">
<li> $50 </li>
</div>
<li class="icon-title"> $50 </li>
</div>
</div> <!-- boxes ending -->
</section>
<!-- Pricing section Ends Here -->

Answer 1

听起来你想在移动设备上堆叠你的部分。使用浏览器广泛支持的flex box可以很容易地实现这一点。只需更改移动查询中内容和灵活方向的合理性。

<style>
.flex {
display: flex;
justify-content: space-around;
flex-direction: row;
}
.section {
border: 1px solid;
height: 20rem;
width: 20%;
min-width: 10rem;
}
@media only screen and (max-width: 500px) {
.flex {
flex-direction: column;
align-items: center;
}
}
</style>
<div class="flex">
<div class="section">
Section one.
</div>
<div class="section">
Section two.
</div>
<div class="section">
Section three.
</div>
</div>

flex direction将选择它是显示在行上还是堆叠为列。然后，对正内容将选择内部项目的定位方式。当然，在理想的情况下，这些样式将在一个单独的文件中：-(