Interface utilisateur sémantique: alignement de texte différent pour différents périphériques

Question

Comment définir un alignement différent pour les appareils mobiles et autres avec l'interface utilisateur sémantique? Je voudrais aligner Label à droite sur tous les appareils sauf mobiles. Est-ce possible? Ou y a-t-il une solution de contournement?

<table> 
    <tr> 
     <td class="right aligned tablet computer only">Label</td> 
     <td>Value</td> 
    </tr> 
</table> 

Answer 1

Vous pouvez utiliser la variation de la grille et de la table. Dans la grille, vous définissez les lignes qui seront affichées sur le mobile, la tablette ou l'ordinateur. Chaque rangée d'appareils contient une table avec des alignements spécifiques.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css" rel="stylesheet"/> 
 

 
<div class="ui container"> 
 
    <div class="ui one column grid"> 
 

 
     <div class="mobile only row"> 
 
     <table class="ui celled table"> 
 
      <tbody> 
 
      <tr class="right aligned"> 
 
       <td>Mobile</td> 
 
       <td>Value mobile</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 

 
     <div class="computer only row"> 
 
      <table class="ui celled table"> 
 
      <tbody> 
 
       <tr class="left aligned"> 
 
       <td>Computer</td> 
 
       <td>Value on computer</td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
</div> 
 
</div>