在移动设备上引导定位不正确

Question

我实现了以下引导布局：

<div>
   <div class="row">
      <!-- ********** Images **********-->
      <div class="col-sm">
         <div class="row">
            Image 1
         </div>
      </div>
      <div class="col-sm">
         <div class="row">
            Image 2
         </div>
      </div>
   </div>
   <div class="row">
      
      <div class="col-sm">
         <div class="row mb-2">
            <div class="col-2">
               <div class="position-absolute mr-1"></div>
               <div class="position-absolute mt-1">1</div>
            </div>
            <div class="col-10 display-23">
               Image 1 - Measurement 1
            </div>
         </div>
         <div class="row mb-2">
            <div class="col-2">
               <div class="position-absolute mr-1"></div>
               <div class="position-absolute mt-1">2</div>
            </div>
            <div class="col-10 display-23">
               Image 1 - Measurement 2
            </div>
         </div>
         <div class="row mb-2">
            <div class="col-2">
               <div class="position-absolute mr-1"></div>
               <div class="position-absolute mt-1">3</div>
            </div>
            <div class="col-10 display-23">
               Image 1 - Measurement 3
            </div>
         </div>
      </div>
      
      <div class="col-sm">
         <div class="row mb-2">
            <div class="col-2">
               <div class="position-absolute mr-1"></div>
               <div class="position-absolute mt-1">1</div>
            </div>
            <div class="col-10 display-23">
               Image 2 - Measurement 1
            </div>
         </div>
         <div class="row mb-2">
            <div class="col-2">
               <div class="position-absolute mr-1"></div>
               <div class="position-absolute mt-1">2</div>
            </div>
            <div class="col-10 display-23">
               Image 2 - Measurement 2
            </div>
         </div>
      </div>
   </div>
</div>

代码链

桌面上的布局如下所示：桌面布局

如果切换到移动视图，则如下所示：移动视图电流

不过，我希望移动设备上的定位如下：移动视图

有人能帮我，并告诉我，我需要做什么来改变定位，使它看起来像最后一个布局的例子？

Answer 1

我已经解决了你现有布局中的问题。你可以改进布局，因为它不干净。

​

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div>

    <div class="row">
       
      
       <div class="col-sm">
        <div class="row mb-2">
        <div class="col-sm">
            <div class="row">
               Image 1
            </div>
         </div>
         </div>
          <div class="row mb-2">
             <div class="col-2">
                <div class="position-absolute mr-1"></div>
                <div class="position-absolute mt-1">1</div>
             </div>
             <div class="col-10 display-23">
                Image 1 - Measurement 1
             </div>
          </div>
          <div class="row mb-2">
             <div class="col-2">
                <div class="position-absolute mr-1"></div>
                <div class="position-absolute mt-1">2</div>
             </div>
             <div class="col-10 display-23">
                Image 1 - Measurement 2
             </div>
          </div>
          <div class="row mb-2">
             <div class="col-2">
                <div class="position-absolute mr-1"></div>
                <div class="position-absolute mt-1">3</div>
             </div>
             <div class="col-10 display-23">
                Image 1 - Measurement 3
             </div>
          </div>
       </div>
 
       <div class="col-sm">
        <div class="row mb-2">
            <div class="col-sm">
                <div class="row">
                   Image 2
                </div>
             </div>
             </div>
          <div class="row mb-2">
             <div class="col-2">
                <div class="position-absolute mr-1"></div>
                <div class="position-absolute mt-1">1</div>
             </div>
             <div class="col-10 display-23">
                Image 2 - Measurement 1
             </div>
          </div>
          <div class="row mb-2">
             <div class="col-2">
                <div class="position-absolute mr-1"></div>
                <div class="position-absolute mt-1">2</div>
             </div>
             <div class="col-10 display-23">
                Image 2 - Measurement 2
             </div>
          </div>
       </div>
    </div>
 </div>

​