Changing the order of blocks in mobile view

Site URL: http://cadimat.wine/enoturismo

Hi! Hope someone can help me.

I used spacer blocks to achieve a 2 column layout with:

1. Icon

2. Text

3. Aligned button

I’d like to have the same order for mobile:

Column 1

1. icon

2. Text

3. Aligned button

Column 2

1. icon

2. Text

3. Aligned button

I appreciate any help!

Hey @Begona maybe try to use next layout col-6 not 2-2-4-2-2.  col-6 > col-2(spacer) + col-2(image) + col-2(spacer) and make second column with the same layout.

58 minutes ago, Begona said:

Site URL: http://cadimat.wine/enoturismo

Hi! Hope someone can help me.

 

I used spacer blocks to achieve a 2 column layout with:

 

1. Icon

2. Text

3. Aligned button

 

I’d like to have the same order for mobile:

Column 1

1. icon

2. Text

3. Aligned button

 

Column 2

1. icon

2. Text

3. Aligned button

 

I appreciate any help!

 

Beside @SquareRefresh's solution, i suggest using the following code in Home > Design > Custom Css

@media only screen and (max-width: 767px) {
	#block-yui_3_17_2_1_1637576991249_12342 + .row  > .col {
		width: 50% !important;
		float: left !important;
	}

	#block-yui_3_17_2_1_1637576991249_12342 + .row + .row > .span-5 {
		width: 50% !important;
		float: left !important;
	}

	#block-yui_3_17_2_1_1637576991249_12342 + .row + .row > .span-4 {
		width: 50% !important;
		float: left !important;
	}

	#block-yui_3_17_2_1_1637672302500_12480 + .row > .span-6 {
		width: 50% !important;
		float: left !important;
	}
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing result

4 minutes ago, bangank36 said:

My testing result

Thanks @bangank36 and @SquareRefresh

I was trying to have only one column on mobile as opposed to 2.

This is what I want on mobile:

However, because my text is not even, the buttons are not aligned on desktop when doing styling it like that. :

2 minutes ago, Begona said:

Thanks @bangank36 and @SquareRefresh

I was trying to have only one column on mobile as opposed to 2.

This is what I want on mobile:

 

However, because my text is not even, the buttons are not aligned on desktop when doing styling it like that. :

 

Opp! Have you changed your page layout? the above Css codes i sugesst is for your current layout 😞

No, I didn't! I added an extra section @bangank36

Thanks for your help

Yes, the breakpoint is fine, but I wanted 1 column on mobile, not 2.

Maybe I didn't explain correctly.

On 11/23/2021 at 11:46 PM, Begona said:

Yes, the breakpoint is fine, but I wanted 1 column on mobile, not 2.

Maybe I didn't explain correctly.

Do you still need help?

1 hour ago, tuanphan said:

Do you still need help?

Thanks, @tuanphan

I solved it by adding a Scheduling button on a code block directly on a text block.

Thanks for your help @bangank36 and @SquareRefresh