CSS媒体查询：根据屏幕宽度到第二行

Question

我有一个包含以下元素的div

<div>
    <a class="postLink" href="{{post.authorLink}}"  target="_blank">{{post.author}}</a>
    <span class="">Published: {{ post.published}}</span>
    <a class="postLink" href="{{post.link}}"  target="_blank">View More</a>
</div>

通常这会呈现为：

{{post.author}}   Published: {{ post.published}}   View More

当屏幕小于，例如760px时，如何将所有链接移动到第二行？

Published: {{ post.published}}   
{{post.author}}   View More  

Answer 1

您可以在容器上使用相对位置，然后在媒体查询中使用绝对值。但我发现这种方式更有趣：

.postInfo a {
    margin-right: 20px;
}
.postPublished::after {
    content: attr(data-published);
    display: inline-block;
    margin-right: 20px;
}

@media (max-width: 780px) {
    .postPublished::after {
        display: none;
    }
    .postPublished::before {
        content: attr(data-published);
        display: block;
    }
}

<div class="postInfo">
    <span class="postPublished" data-published="Published: {{ post.published}}">
        <a  class="postLink" href="{{post.authorLink}}"  target="_blank">{{post.author}}</a>
    </span>
    <a class="postLink" href="{{post.link}}" target="_blank">View More</a>
</div>

检查on Fiddle。