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

根据仅使用 CSS 交换 DIV 位置（因此它是重复的），您可以尝试：

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