使用引导网格系统的响应式设计

Question

我有两种不同的桌面视图和移动视图布局。这是他们的样子

到目前为止，我已经编写了这段代码，但它并不完全符合我的需要。我不知道如何在移动视图中切换块 C 和 D

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="row row-cols-lg-2 row-cols-1"> 
    <div class="row col col-lg-10"> 
       <div class="col-3 bg-secondary">A</div> 
          <div class="col-9 "> 
             <div class="row bg-success p-1"> B</div> 
             <div class="row bg-primary order-lg-2 p-1">D</div> 
          </div> 
       </div> 
       <div class="col col-lg-2"> 
          <div class="col bg-warning p-1">C</div> 
       </div> 
</div>
   

我需要使用 Bootstrap 网格。知道如何开始吗？

Answer 1

您可以使用order-xx-N 重新排序屏幕上的元素，引导程序内置了媒体查询。 https://getbootstrap.com/docs/5.0/layout/breakpoints/

可能的例子

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-3 bg-secondary mb-auto">A
      <p class="d-lg-none bg-light">Mobile layout</p>
      <p class="d-none d-lg-block bg-info">Desktop layout</p>
    </div>
    <div class="row col-9">
      <div class="col col-lg-9 bg-success p-1">B</div>
      <div class="col order-1 p-1  bg-primary ">C</div>
      <div class="col-12  bg-warning p-1  order-lg-2">D</div>
    </div>
  </div>