title: Invert the HTML of an Angular component
body: <p>Bonjour,
  I have a problem with the html of my project.</p>
  <p>Currently, I have a tab component like this :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;row-page&quot;&gt;
    &lt;div class=&quot;container-graphic&quot;&gt;
      &lt;app-graphic [statusGraphic]=&quot;statusChangementPrix&quot; [statusCounter]=&quot;statusVendu&quot;&gt;
      &lt;/app-graphic&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row-page&quot;&gt;
    &lt;div class=&quot;container-graphic&quot;&gt;
      &lt;app-graphic [statusGraphic]=&quot;statutNouveauBien&quot; [statusCounter]=&quot;statusOffre&quot;&gt;
      &lt;/app-graphic&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row-page&quot;&gt;
    &lt;div class=&quot;container-graphic&quot;&gt;
      &lt;app-graphic [statusGraphic]=&quot;statusNouveauCompromis&quot; [statusCounter]=&quot;statusArchive&quot;&gt;
      &lt;/app-graphic&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>In this tab component I multiply 3 times the graphic component :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;wrapper-row-graphic&quot;&gt;
    &lt;div class=&quot;wrapper-graphic&quot;&gt;
      &lt;div class=&quot;wrapper-indicator&quot;&gt;
        &lt;div class=&quot;indicator-graphic&quot;&gt;
          &lt;button mat-mini-fab 
             color=&quot;primary&quot; 
             class=&quot;figureGraphic&quot; 
             *ngIf='graphicData'&gt;
             {{graphicData.length}}
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;status&quot;&gt;
          &lt;h4 *ngIf='statusGraphic'&gt;{{statusGraphic}}&lt;/h4&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;graphic&quot;&gt;
        &lt;highcharts-chart 
          [Highcharts]=&quot;Highcharts&quot; 
          [options]=&quot;chartOptions&quot; 
          style=&quot;height: 150px; display: block;&quot;&gt;
        &lt;/highcharts-chart&gt;
        &lt;!-- &lt;div id=&quot;container&quot; style=&quot;height: 150px; margin: 2px;&quot;&gt;&lt;/div&gt; --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;wrapper-infos&quot;&gt;
      &lt;div class=&quot;indicator-counter&quot;&gt;
        &lt;button mat-fab color=&quot;primary&quot; class=&quot;figureIndicator&quot;&gt;
          &lt;mat-icon *ngIf='counterData'&gt;{{counterData.length}}&lt;/mat-icon&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;infos&quot;&gt;
        &lt;h4 *ngIf='statusCounter'&gt;{{statusCounter}}&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I would like to know if it was possible to reverse the direction of a component in the tab component?
  Because currently the 3 graphic components are identical.
  On the left the graphic and on the right the counter. I would like to position the counter on the left and the graph on the right on the second line.</p>
  <p>I tried with a row-reverse but it doesn't look very nice.</p>