如何使用 javascript 或 css 根据屏幕尺寸渲染 div

Question

我正在尝试让条件 if (course_module_index === 0) 在 const header 的 TOP 上呈现当屏幕最多响应 max-width: 599px.
时（移动版）我试图在 CSS 中做点什么，但我做不到。是否可以通过 javascript 执行此操作？
我还在开始，我不确定如何开始。
注意：下面是正确的桌面渲染，只有在移动版本中我想更改位置并将 const header 放在下面

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

如果你用 display: flex 将元素包装到 div 中，你可以按顺序属性
管理组件的顺序 flex order docs

如何使用 javascript 或 css 根据屏幕尺寸渲染 div

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

javascript

render

media-queries