How To Change Div Align In Mobile Version

I have 3 div in my html. div1, div2,div3. Now in mobile version I want to change the alignment of those div. I have given in below images. HTML Code

<

Solution 1:

Looks like you are using bootstrap. If you re using Bootstrap 4 you can use the ordering feature to easily achieve this.

<div class="row">
  <div class="col-md-12 order-md-1 order-sm-1">
    Div1
  </div>
   <div class="col-md-3 order-md-2 order-sm-3">
      Div2
   </div>
   <div class="col-md-9 order-md-3 order-sm-2">
      Div3
  </div>
</div>

Fiddle

EDIT

Since you are using bootstrap 3, reordering col-12 are not possible (e.g. col- * -push / col- * -pull). As alternative you can use flex-box or grid to achieve this easily. See example below.

<div class="row reordered">
  <div class="col-md-12">
    Div1
  </div>
  <div class="col-md-3">
    Div2
  </div>
  <div class="col-md-9">
    Div3
  </div>
</div>

CSS - Reordered using grid

@media screen and (max-width: 992px) { //992 is the breakpoint of col-md
  .reordered {
   display: grid;
 }

 .col-md-3 {
   order: 2;
 }

.col-md-9 {
   order: 1;
 }
}

Fiddle

Solution 2:

<div class="row">
            <div class="col-md-12 col-12">
                Div1
            </div>
            <div class="col-md-12 col-12">
                <div class="row flex-row-reverse flex-column-reverse">
                    <div class="col-md-3 col-12">
                        Div2
                    </div>
                    <div class="col-md-9 col-12">
                        Div3
                    </div>
                </div>
            </div>
        </div>

Solution 3:

If I understand correctly, you're using the Bootstrap framework in which case you can use the "responsive utility classes" which are part of the framework's grid system to achieve what you require. To control the ordering of elements on the mobile version, you will also need to add some additional CSS.

The following changes to your HTML, along with the added CSS of .order-row etc, should achieve this for you:

@media (max-width: 768px) {
  .order-row {
    display: flex;
    flex-direction: column;
  }
  .order-0 {
    order: 0;
  }
  .order-1 {
    order: 1;
  }
}

<link href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css"  />
<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12">
      Div1
    </div>
  </div>
  <div class="row order-row">
    <div class="col-md-3 col-sm-12 order-1">
      Div2
    </div>
    <div class="col-md-9 col-sm-12 order-0">
      Div3
    </div>
  </div>
</div>

For more information on how to use bootstraps responsive grid classes, see this documentation

Solution 4:

Div1 Div2 Div3

Solution 5:

if you use bootstrap 4, you can use order

<div class="row">
 <div class="col-md-12">
  Div1
 </div>
 <div class="col-md-9 order-md-0 order-1">
  Div2
 </div>
 <div class="col-md-3 order-md-1 order-0">
  Div3
 /div>
</div>

Explanation
the Div2 will show on the left on viewport md and bigger, and it will shown under Div3 if the viewport is smaller than md

Share