'Bootstrap positioning incorrect on mobile devices

I have implemented the following bootstrap layout:

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

Codeply Link

The layout looks like this on desktop: Desktop Layout

If you switch to the mobile view, it looks like this: Mobile view current

However, I would like the positioning on mobile devices to look like this: Mobile view

Can anyone help me and tell me what I need to do to change the positioning so that it looks like the last layout example?

htmlbootstrap-4responsive-design


Solution 1:[1]

I have solved your problem in your existing layout. you can improve layout as its not clean.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Prakaash Rajotiya

Related Questions