Column Classes stack right column on top of the left column on mobile

[Caroline Twist]

Is there a way to have .one-half column class stack right column on top of the left column on mobile view? Inherently it stacks the left column on top of the right column.

This is the way the classes behave now:
<div class="one-half first">This is on the left on desktop, and on top on mobile</div>
<div class="one-half">This is on the right on desktop and on the bottom on mobile</div>
<div class="clearfix"></div>

This is the way i want them to behave:
<div class="one-half first">This is on the LEFT on desktop, and on BOTTOM on mobile</div>
<div class="one-half">This is on the RIGHT on desktop and on the TOP on mobile</div>
<div class="clearfix"></div>

Appreciate any tips!

Thanks!

[Victor Font]

The order of items is controlled by the document object model (DOM). The DOM is created when the page loads in the browser. You can adjust positioning with CSS, but doing what you want would require a lot of trial and error. You can also move the content around with jQuery, but again it would be difficult. You'd have to test for the type of device, screen width, etc.. It's could take a lot of coding.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Caroline Twist]

Okay, thanks Victor!

[Caroline Twist]

I'm realizing that maybe I didn't as the right question. Anyway, I wanted to follow-up that I found a solution through the suggestion from someone in another forum, in case it is helpful for others.

She said:
"You wound need to use Custom CSS.
Basically you would need to change the order of the HTML div containers, so that the one you want on top (in mobile) is coded first.
Then create CSS so that the two divs float:right; at 50%. On mobile change the div to float:none;"

I used the Genesis Columns Advanced plugin which lets me use shortcodes in the visual page and post editor which makes it easier for me to keep track of things, but more importantly, it lets me apply CSS classes to column classes. So I named .one-half column class .responsive-align-right

Here's the HTML:

[one-half-first class="responsive-align-right"]
Content I want on the right in desktop, but on the top in mobile.
[/one-half-first]
[one-half class="responsive-align-right"]
Content I want on the left in desktop, but on the right in mobile.
[/one-half]
[clearfix]

Here's the CSS:

.responsive-align-right{
float: right !important;}

@media only screen and (max-width:800px) {
.responsive-align-right {
width: 50% !important;}
}

@media only screen and (max-width:414px) {
.responsive-align-right {
width: 100% !important;
float: none !important;}
}

[Author]

Posts