推拉基础

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>

在小屏幕上，我首先需要标题，然后是文本字段，但在中等和向上，我需要的是相反的方式--我已经尝试过推拉，但它们无法工作--有什么想法吗？

Answer 1

根据Swap DIV position with CSS only (所以它是一个副本)，您可以尝试：

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; }
    }
}