Reorder Columns in Responsive Layouts?

[lc4466]

Hey! Is there a way to use CSS to reorder the columns in a responsive layout for mobile? I have a layout that's two column (9-col, 3-col) and when resized the 3-col right menu automatically shifts to the bottom. Ideally I'd like it to be on top in mobile but still on the right in larger formats. Anyone know a way to accomplish this?

[Chicago_HPT]

Short answer is yes.

Longer answer is, there are several ways to do this.

MadCap Flare GUI:
Flare has a Responsive Layout window pane that lets you set responsive styles and then edit how they look at different breakpoints, such as "Web" (full desktop), "Tablet," and "Mobile." You can visually set your layout the way you want it to be for each breakpoint. It's a pretty convenient, and fairly quick, way to organize your responsive layouts. For information about how to do all that, check out these help topics (they're pretty quick reads):
http://help.madcapsoftware.com/flare201 ... Design.htm
http://help.madcapsoftware.com/flare201 ... ontent.htm
http://help.madcapsoftware.com/flare201 ... ayouts.htm
http://help.madcapsoftware.com/flare201 ... w-Pane.htm
https://www.madcapsoftware.com/blog/how ... ut-window/ (MadCap blog entry that goes into detail about the responsive layout window pane)

Directly via CSS:
If you're comfortable writing CSS directly, there are at least four (4) general ways to do this via CSS: Flex-box, Foundation elements, "old-school" methods float and absolute positioning. Rather than trying get into the weeds myself, here are some good pages on the web that do it better than I could:
Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/almanac/properties/o/order/
Zurb Foundation
https://get.foundation/sites/docs/grid.html or, specifically
https://get.foundation/sites/docs/grid. ... e-ordering
Good ol' CSS standbys
https://webdesign.tutsplus.com/tutorial ... -cms-27079

You may need to finagle the CSS to explicitly set a parent div to use display:flex. I haven't bothered myself since it's pretty quick and easy to use the Responsive Layout window pane to accomplish what I need.

I hope that helps,
-jeff

[lc4466]

Hey Jeff. I would love to do this through the responsive layouts directly but I think I must be missing something in your explanation. If I use the Responsive Layout controls to switch to the Mobile view and reposition the cell in question to be on the top instead of the bottom, switching back to Web view shows that it's been moved to the top in that view as well.

[Chicago_HPT]

That's... weird. If you move it back in the Web view, does it then also move back in the Mobile view? (sorry for my delayed reply, had a couple of brutal weeks).

[lc4466]

Yes - as far as I can tell they are linked in such a way that right in Web is always bottom in Mobile, left in Web is always top in Mobile. Changing the order in one view changes the order in the other as well.