CSS-Medienabfrage: auf die zweite Zeile abhängig von der Bildschirmbreite

Question

Ich habe ein div mit folgenden Elementen

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

Normalerweise dies als wiedergegeben wird:

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

Wenn der Bildschirm kleiner ist als zum Beispiel 760px , wie kann ich alle Links in die zweite Zeile verschieben?

Answer 1

Sie könnten wahrscheinlich relative Position auf Container verwenden, dann absolute für span in Medienabfrage. Aber ich finde diese Art und Weise interessanter:

.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>

Check it on Fiddle.