html - 推/拉 - 基础

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