Push/Pull - Foundation

Question

<dl>
    <dt class="small-12 medium-push-12 columns">Title</dt>
    <dd class="small-12 medium-pull-12 columns"><input type="text"></dd>
</dl>

On small screens I need title first then the text field, but on medium and up I need it the other way around - I've tried push and pull but they fail to work - any ideas?

You can't push/pull full width (12 wide) columns up or down. It would work if they were side-by-side on medium like this: http://codeply.com/go/g9SdeyJKl3 — Carol Skelly, Apr 15 '15 at 17:32

score -1 · Answer 1 · edited May 23 '17 at 12:31

-1

According to Swap DIV position with CSS only (so it's a duplicate) you can try:

html:

<dl>
    <dt class="small-12 columns">Title</dt>
    <dd class="small-12 columns"><input type="text" /></dd>
</dl>

scss:

@media #{$medium-up} { 
    dl {
        display: flex;
        flex-direction: column;
        dt { order: 2; }
        dd { order: 1; }
    }
}

edited May 23 '17 at 12:31

Community

1
1

answered May 02 '15 at 15:01

Bass Jobsen

48,736
16
143
224

This is not a duplicate of your link. It says Foundation IN THE TITLE. – atilkan Mar 11 '16 at 06:03

Push/Pull - Foundation

1 Answers1