Canvas Support

Re-order for mobile

1 reply·opened Jun 10, 2020
F
frederic80Jun 10, 2020

Is it possible to re-order for mobile? Is there a class available for that?
In this example on a big screen you will find the text first and on the right side the image. On mobile I want the image first before the text. (col-md-5 before col-md-7). Is that possible?

<div class="row align-items-center gutter-40 col-mb-50 mt-5 mb-5">
						<div class="col-md-7">
							<div class="heading-block">
								<h2>Title</h2>
							</div>
							<p>Lorem ipsum text.</p>
						</div>
					       <div class="col-md-5">
							<img data-animate="fadeInRightBig" src="images/home.png">
						</div>
				  </div>
S
SemiColonWebSTAFFJun 10, 2020

Hello,

This is Absolutely Possible! Simply consider using the following code:

<div class="row align-items-center gutter-40 col-mb-50 mt-5 mb-5">
&#x9;<div class="col-md-5 order-md-last">
&#x9;&#x9;<img data-animate="fadeInRightBig" src="images/home.png">
&#x9;</div>
&#x9;<div class="col-md-7">
&#x9;&#x9;<div class="heading-block">
&#x9;&#x9;&#x9;<h2>Title</h2>
&#x9;&#x9;</div>
&#x9;&#x9;<p>Lorem ipsum text.</p>
&#x9;</div>
</div>

This will definitely work fine. You can check more about these here: https://getbootstrap.com/docs/4.5/layout/grid/#reordering . Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard