Question

我目前有一个两列的网页，左边有2张卡，右边有4张卡。当我在较小的屏幕（lg或以下）上查看页面时，列将按设计重新排列，以将左侧的卡片堆叠在右侧的卡片之上。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-xl-6 col-lg-12">
        <div class="card">XL-Left-1 LG&Below-1</div>
        <div class="card">XL-Left-2 LG&Below-4</div>
    </div>
    <div class="col-xl-6 col-lg-12">
        <div class="card">XL-Right-1 LG&Below-2</div>
        <div class="card">XL-Right-1 LG&Below-3</div>
        <div class="card">XL-Right-1 LG&Below-6</div>
        <div class="card">XL-Right-1 LG&Below-5</div>
    </div>
</div>

一旦屏幕尺寸为“ lg”，我希望按特定顺序放置卡片。我该如何实现？当前的布局在上方，我已将订单排序为“ LG＆Below”

希望这很有道理！

Answer 1

我的尝试是将第n个行排成行，每个行都有两个col-sm-6 col-lg-12容器。

赞：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div class="col-xl-6 col-lg-12">1</div>
   <div class="col-xl-6 col-lg-12">2</div>
</div>
<div class="row">
   <div class="col-xl-6 col-lg-12">3</div>
   <div class="col-xl-6 col-lg-12">4</div>
</div>
<div class="row">
   <div class="col-xl-6 col-lg-12">5</div>
   <div class="col-xl-6 col-lg-12">6</div>
</div>
<div class="row">
   <div class="col-xl-6 col-lg-12">7</div>
   <div class="col-xl-6 col-lg-12">8</div>
</div>

然后将卡放在col-sm-6 col-lg-12容器中

Answer 2

我建议不要使用内联CSS样式，这对我们根据屏幕尺寸要实现的功能的控制有限，请尝试使用带有断点的媒体查询，并在其上使用自定义的CSS样式类。

https://getbootstrap.com/docs/4.3/layout/overview/

在较小屏幕尺寸的不同列中对卡片进行重新排序

2 个答案: