How do you flip or rotate columns on...

User 2957107 Photo


Registered User
9 posts

I have two rows with two columns.
First row: Col 1 has text, Col 2 has an image.
Second row: Col 1 has an image, Col 2 has text.
When I get down to mobile viewports I need the rows/columns to be text - image - text - image stacked.

I get the stacked response but it is text-image-image-text.
I can't seem to find a solution in the software.
User 122279 Photo


Senior Advisor
14,197 posts

How are you building those columns and rows? Are you using Flex? In that case, you can set the second row to Column Reversed.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,383 posts
Online Now

Inger wrote:
How are you building those columns and rows? Are you using Flex? In that case, you can set the second row to Column Reversed.

INGER
Not sure that you can use flex in RED
There is a move column right or left arrow thingy but that would depend on how many columns there are in the row.

Just goes to show how one has to think mobile first when designing stuff nowadays
Mastering The Understanding With Hands-On Learning
NEW TO
"COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS

I can make "INDIVIDUAL BESPOKE" step-by-step video tutorials
for you to watch at your leisure as many times as you need

I have also started updating the ready made step by step tutorials, Ready Soon

my secure email details form
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 122279 Photo


Senior Advisor
14,197 posts

OOOPS!

I didn't check which program it was...
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,007 posts

Hi Roy,
Can you share your project file so it's easier to help?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2957107 Photo


Registered User
9 posts

Attached is a test file. It has two rows. R1: text, image. R2 Image, text. When it goes mobile I need it to be stacked image, text, image, text.
Attachments:
User 2699991 Photo


Registered User
4,383 posts
Online Now

Roy Myers wrote:
Attached is a test file. It has two rows. R1: text, image. R2 Image, text. When it goes mobile I need it to be stacked image, text, image, text.


Done a short video its on its way to you tube now,
will let you know when its up
Mastering The Understanding With Hands-On Learning
NEW TO
"COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS

I can make "INDIVIDUAL BESPOKE" step-by-step video tutorials
for you to watch at your leisure as many times as you need

I have also started updating the ready made step by step tutorials, Ready Soon

my secure email details form
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2699991 Photo


Registered User
4,383 posts
Online Now

here you go

https://youtu.be/FpgXv2WRYbo
Mastering The Understanding With Hands-On Learning
NEW TO
"COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS

I can make "INDIVIDUAL BESPOKE" step-by-step video tutorials
for you to watch at your leisure as many times as you need

I have also started updating the ready made step by step tutorials, Ready Soon

my secure email details form
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2957107 Photo


Registered User
9 posts

Thanks for the video (and I appreciate the time) but when you went back out to the default size, the columns are incorrect and not like the original... this is the problem I am having. I need a single-column stack at mobile that is text-image-text-image and two rows at say 600px, row 1 text-image, row 2 image-text... it needs to go back to the original two row-column setup at larger sizes.

I did use the span settings with the column management toggles at various media queries but it didn't work...(I should have mentioned it earlier). if I set a query at 320 (and 12 spans per column) and reversed the columns per the management toggle (2nd row) then it stays reversed on every 12 span media query I set... not usable.

My video shows how I can't get the results I need and I attached a version with more media queries.

https://youtu.be/j7ulXcu3_xs



Attachments:
User 2699991 Photo


Registered User
4,383 posts
Online Now

so give the columns you wish to rotate or reverse either a unique ID or an additional class name

if you choose a unique ID then look in the "Design" Tab and the section "Apply Styles" open it and select "To This Element ID Only"


Mastering The Understanding With Hands-On Learning
NEW TO
"COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS

I can make "INDIVIDUAL BESPOKE" step-by-step video tutorials
for you to watch at your leisure as many times as you need

I have also started updating the ready made step by step tutorials, Ready Soon

my secure email details form
https://rsd-tutorialscom.coffeecup.com/ … l-details/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.