how to interchange position of two divs on mobile


I have two div's on the desktop, it is fine to show first div(#div1) and then second div(#div2), but on mobile, I want to interchange the position of div's, means div2 should be placed before div1.

Here is my HTML code

       <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 " id="div1" style="margin-top:15px"> 
           @{ Html.RenderPartial("_RelatedInformationLeftsection", Model);}
           
       </div>
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 " id="div2" style="border-left:1px solid #eeeeee;margin-top:15px">
           @{ Html.RenderPartial("_RelatedInformationRightsection", Model);}
           
       </div>

how can i interchange it's position without adding any extra html code? i want to do it with CSS if possible.


Asked by:- jaya
1
: 239 At:- 6/19/2017 1:22:27 PM
CSS HTML CSS3






1 Answers
profileImage Answered by:- vikas_jk

Yes, you can do it.

You need to create a class with the following code:

/*interchangeDiv locationCSS below 768px*/
@media only screen and (max-width: 767px) {
  .col-interchange-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}

and your HTML must be like this

<div class="col-interchange-12">
       <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"  id="div1" style="margin-top:15px"> 
           @{ Html.RenderPartial("_RelatedInformationLeftsection", Model);}
           
       </div>
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"  id="div2" style="border-left:1px solid #eeeeee;margin-top:15px">
           @{ Html.RenderPartial("_RelatedInformationRightsection", Model);}
           
       </div>
      </div>

that's it, you can check it, below 768px, div2 would be above div1

0
At:- 6/20/2017 6:39:14 AM





Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly