Switching columns on mobile (Boostrap 4)

HTML & CSS
1

Hi there,

I have the following code using Bootstrap 4.

I would like to switch the columns on mobile view, but can’t seem to work it out.

I’ve seen there are order- classes in Bootstrap, but I can’t get it right.

This is what I have:

	<div class="container">
	<h3 class="text-center page-header">cPanel Control Panel</span></h3>
	<div class="row align-items-center">
				<div class="col-md-7 order-xs-1 reason-text">
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
		</div>
		<div class="col-md-5 order-xs-12"><img src="assets/images/reason-rocket.svg" /></div>
	</div>		
	</div>

Can anyone help me with swapping the columns on mobile?

Thank you.

2

Hi, to order mobile content, you must use order-1, order-12, order-first, order-last.
order-xs- doesn’t exist.

<div class="container">
	<h3 class="text-center page-header">cPanel Control Panel</h3>
	<div class="row align-items-center">
                <div class="col-md-5 order-12"><img src="assets/images/reason-rocket.svg" /></div>

		<div class="col-md-7 order-1 reason-text">
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
		</div>
	</div>		
	</div>
3

Thanks for the reply.

I have now tried the following, but it has made the div containing the image disappear completely.

	<div class="container">
	<h3 class="text-center page-header">cPanel Control Panel</span></h3>
	<div class="row align-items-center">
		<div class="order-first order-sm-12 order-md-5"><img src="assets/images/reason-cpanel.svg" /></div>
				<div class="order-last order-sm-12 order-md-7 reason-text">
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
		</div>
		
	</div>		
	</div>
4

Try the code I gave you back.

Careful there’s one too many on h3.

5

Question: In what order do you want to see the content on mobile? And how on the desktop?

6

Thanks, I didn’t see your full code until just now.

I have tried that, but it didn’t seem to switch the divs round on mobile. I’m trying to have the image that is on the right on desktop appear on the top of the text on mobile.

Thank you for pointing out the <h3> issue :slight_smile:

7

I made a Codepen for you: https://codepen.io/davidemancuso/pen/QWjXmaQ

2 Likes
8

Thank you, that worked perfectly! That is much appropriated, thank you.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.