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
2
: 5434 At:- 6/19/2017 1:22:27 PM
CSS HTML CSS3







2 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

2
At:- 6/20/2017 6:39:14 AM
thank you it is working as required, commenting late here but it was useful 0
By : jaya - at :- 6/14/2018 5:13:58 PM


profileImage Answered by:- Vinnu

Swap div positions on mobile using CSS media query, use below CSS 

@media (max-width: 600px) {
  
.container {
  display:flex;
  flex-direction: column-reverse;
}

.section1,
.section2 {
  height: auto;
}
}

Here is fiddle example: https://jsfiddle.net/y4a1fo92/

Thanks

0
At:- 12/9/2022 4:02:53 PM






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