How to render a div according to screen size using javascript or css

Question

I'm trying to get the condition if (course_module_index === 0) to be rendered on TOP of the const header when the screen is responsive (mobile version) of at most max-width: 599px.
I tried to do something in CSS but I couldn't. Is it possible to do this via javascript?
I'm still starting and I'm not sure how to start.
NOTE: Below is the Desktop rendering that is correct, only in the mobile version I wanted to change the position and put the const header underneath

renderHeader() {
  const {course_module_index} = this.state;
  const header = (
    <>
      <h4 className="col-3 md-col-8 sm-col-4 color__primary1 bold">Conversation</h4>
      <p className="col-8 offset-3 md-col-8 sm-col-4 body2 back__type">
        Practice your English in the conversation classes available in the schedule below.
        You can join a class up to 10 min. after its start time, but
        we recommend that you book a time as class size is limited.
      </p>
    </>
  );
  if (course_module_index === 0) {
    return (
      <>
        {header}
        <div className="header__opening-class md-col-8 sm-col-4">
          <h6>Inaugural classes available!</h6>
          <p>Mon/Wed/Fri from 9:00h to 9:30h | Tues/Thurs from 7:00 pm to 7:30 pm</p>
        </div>
        <hr ref={this.conversationBlockRef}className="margin-zero col-12 md-col-8 sm-col-4"/>
      </>
    );
  }
  return (
    <>
      {header}
      <hr ref={this.conversationBlockRef} className="margin-zero col-12 md-col-8 sm-col-4"/>
    </>
  );
}

Answer 1

if you wrap your elements into a div with display: flex, you can manage order of components by order property
flex order docs