html - 在较小的屏幕尺寸上重新排列不同列中的卡片

Question

我目前有一个 2 列网页，左侧有 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 contanners

像这样:

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