推/拉 - 基础

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