title: How to change order of flex-box programmatically in React JS
body: <p>The order of flex-box is not changing on click of Notification received, </p>
  
  <p>I tried by getting element by class name and assigning the order for the same. but it is not working.</p>
  
  <p>But changing innerHTML is working</p>
  
  <pre><code>document.getElementsByClassName(style.notificationCard)[0].innerHTML = "notification received";
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import style from './HomePage.css'
  import * as ReactDOM from "react-dom";
  
  class HomePage extends Component {
  
      onNotificationClick=()=&gt; {
          document.getElementsByClassName(style.notificationCard)[0].order = 2;
      };
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div className={style.main}&gt;
                      &lt;div className={style.createCard}&gt;
                          Create memory
                      &lt;/div&gt;
                      &lt;div className={style.notificationCard}&gt;
                          Notification
                      &lt;/div&gt;
                      &lt;div className={style.alertsCard}&gt;
                          alerts
                      &lt;/div&gt;
                      &lt;div className={style.groupsCard}&gt;
                          groups
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;button onClick={this.onNotificationClick}&gt;Notification received&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default HomePage;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main{
      background: #969696;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-direction: column;
  
  }
  
  .createCard{
      order: 2;
      background: aqua;
      width: 100%;
      height: 120px;
  }
  
  .notificationCard{
      order: 1;
      width: 100%;
      height: 120px;
  }
  
  .alertsCard{
      order: 4;
      width: 100%;
      background: aqua;
      height: 120px;
  
  }
  .groupsCard{
      order: 3;
      width: 100%;
      height: 120px;
  }</code></pre>
  </div>
  </div>
  </p>