Home Forums Porto Admin Template Change order from div to mobile view

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 3 months, 3 weeks ago. This post has been viewed 175 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10029790

    Lenze90
    Participant

    hello everyone.
    i have within my class row two columns.
    In the desktop view it looks good. Left and right.
    In the mobile version I now have the problem that I would like to have the right column above the left column. So I would like to change the order.
    How can I do that?

    							<div class="col-lg-4 col-lg-push-4 appear-animation animated fadeIn appear-animation-visible" data-appear-animation="fadeIn" data-appear-animation-delay="800" style="animation-delay: 800ms;">
    								<div class="process-fitter-img">
    									<!--<blockquote>
    										<p class="text-6 line-height-9 mb-0 mt-4">Your time is limited, so don’t waste it living someone else’s life.</p>
    									</blockquote>
    									<a class="btn btn-outline btn-light text-light font-weight-bold mb-3" href="#">jetzt Auftrag suchen</a>-->
    								</div>
    							</div>
    							<div class="col-lg-8 col-lg-pull-8 pb-2">

    pull and push does not work


    #10029792

    Support2
    Keymaster

    Hello,

    I saw that you are using Bootstrap 3 classes (pull and push classes), in that case you will need create custom classes to reorder the elements on mobile:

    1) Add in (css/custom.css):

    @media(max-wdith: 767px) {
    	.custom-xs-d-flex {
    	    display: flex;
    	}
    
    	.custom-xs-order-1 {
    	    order: 1;
    	}
    
    	.custom-xs-order-2 {
    	    order: 2;
    	}
    }

    2) HTML:

    <div class="row custom-xs-d-flex">
        <div class="col-lg-4 col-lg-push-4 appear-animation animated fadeIn appear-animation-visible" data-appear-animation="fadeIn" data-appear-animation-delay="800" style="animation-delay: 800ms;">
        ......
        </div>
        <div class="col-lg-8 col-lg-pull-8 pb-2">
        .....
        </div>
    </div>

    Since Porto 6.0 and Porto Admin 2.0 we use the Bootstrap 4, that already comes with ready classes to reorder elements. But for older versions with Bootstrap 3 is necessary the custom css classes explained above.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.
    https://getbootstrap.com/docs/4.3/utilities/flex/#order


Viewing 2 posts - 1 through 2 (of 2 total)