'Semantic UI: Different text alignment for different devices

How could I set different alignment for mobile and other devices with Semantic UI? I would like to align Label to right on all devices except mobiles. Is this possible? Or is there any workaround?

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


Solution 1:[1]

You can use the variation of grid and table. In grid you defines which rows which will be shown on mobile, tablet or computer. Each device row contains table with specific alignments.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexander Tyapkov

Related Questions