如何使用ReactJS实现响应式布局？

import React from 'react';
import './ResponsiveLayout.css';

function ResponsiveLayout() {
  return (
    <div className="container">
      <header className="header">Header</header>
      <nav className="sidebar">Sidebar</nav>
      <main className="content">Main Content</main>
      <footer className="footer">Footer</footer>
    </div>
  );
}

export default ResponsiveLayout;

.container {
  display: flex;
  flex-wrap: wrap;
}

.header, .footer {
  flex: 1 100%;
  background-color: #f1f1f1;
  text-align: center;
  padding: 20px;
}

.sidebar {
  flex: 1 25%;
  background-color: #ddd;
  padding: 20px;
}

.content {
  flex: 3 75%;
  background-color: #fff;
  padding: 20px;
}

/* 媒体查询，用于调整小屏幕设备上的布局 */
@media (max-width: 600px) {
  .sidebar, .content {
    flex: 1 100%;
  }
}