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。