Move view in layout to other column on mobile only

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to display text in different areas depending on the screen size.

Solution: In this specific case, the way the content is organized in the HTML markup creates a challenge. One option is to include the text twice, and use Bootstrap responsive classes like visible-lg-block and hidden-lg to show and hide them based on Bootstrap's responsive utilities.

Relevant Documentation:
https://getbootstrap.com/docs/3.3/css/#responsive-utilities

This support ticket is created 5 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Views plugin

This topic contains 4 replies, has 2 voices.

Last updated by chrisC-25 5 years ago.

Assisted by: Christian Cox.

Author

Posts

October 28, 2019 at 2:42 pm #1371461

chrisC-25

I have a view showing other records by an artist in a toolset layout. On desktop this works great when the view is on the left side under the main record. But, on mobile it ends up pushing the text content down below the other releases. I want to move the view showing the other records to come AFTER the text content on mobile only. Here is an example:
hidden link

October 28, 2019 at 3:13 pm #1371527

Christian Cox

Hi, I think there are two options here:
1. Move the "Other releases" section so that it starts below the text column. That would fix the problem in both large and small formats, but moves the other releases lower on the screen for larger screen sizes, leaving a large vertical gap in content.
2. Place the text content twice, and use Bootstrap responsive helper classes to show or hide the correct content depending on the screen size. This would fix the problem in both large and small formats without moving the other releases lower on the screen for larger screen sizes, but it duplicates content in the page source and that can have an effect on SEO.

Let me know what you would prefer and I can give you some additional guidance.

October 28, 2019 at 6:25 pm #1371625

chrisC-25

Having content twice and hiding on screen size is good. I have tried using these classes:
.d-none .d-sm-block

on a cell

but they do not seem to work?

October 28, 2019 at 8:24 pm #1371731

Christian Cox

It looks like you're using Bootstrap 3. The responsive utility classes can be found here:
https://getbootstrap.com/docs/3.3/css/#responsive-utilities

I would use .visible-lg-block and .hidden-lg to show or hide elements on the largest displays.

October 29, 2019 at 3:43 pm #1372479

chrisC-25

My issue is resolved now. Thank you!