How To Change Div Align In Mobile Version

Question

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.

<divclass="row"><divclass="col-md-12 order-md-1 order-sm-1">
    Div1
  </div><divclass="col-md-3 order-md-2 order-sm-3">
      Div2
   </div><divclass="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.

<divclass="row reordered"><divclass="col-md-12">
    Div1
  </div><divclass="col-md-3">
    Div2
  </div><divclass="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:

<divclass="row"><divclass="col-md-12 col-12">
                Div1
            </div><divclass="col-md-12 col-12"><divclass="row flex-row-reverse flex-column-reverse"><divclass="col-md-3 col-12">
                        Div2
                    </div><divclass="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;
  }
}

<linkhref="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css"  /><divclass="container"><divclass="row"><divclass="col-md-12 col-sm-12">
      Div1
    </div></div><divclass="row order-row"><divclass="col-md-3 col-sm-12 order-1">
      Div2
    </div><divclass="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

<divclass="row"><divclass="col-md-12">
  Div1
 </div><divclass="col-md-9 order-md-0 order-1">
  Div2
 </div><divclass="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

Html5 Ready