CSS grid - two columns on desktop and 1 column on mobile - css

Question

This is what I want to achieve:
On desktop/big screen - 30% of the left side and around 70% of the right side
On mobile/smaller screens - right side goes on top of the left side
Here's what I have so far. I have a feeling I'm using the grid in the right or at least I'm not achieving what I have above...
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: auto;
grid-template-areas: "sidebar content content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
#media (max-width: 768px) {
grid-template-rows: repeat(auto, 1fr);
grid-template-areas:
"content"
"sidebar";
}
<div class="wrapper">
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
What's the best approach to this?

Answer 1

You forget to wrap css in .wrapper class in media query
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: auto;
grid-template-areas: "sidebar content content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
#media (max-width: 768px) {
.wrapper {
grid-template-rows: repeat(auto, 1fr);
grid-template-areas:
"content"
"sidebar";
}
}
<div class="wrapper">
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
jsfiddle link

Answer 2

body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
width: 70%
}
.wrapper {
display: grid;
display: flex;
flex-wrap: wrap;
grid-gap: 10px;
grid-template-columns: auto;
grid-template-areas: "sidebar content content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
#media (max-width: 768px) {
grid-template-rows: repeat(auto, 1fr);
grid-template-areas:
"content"
"sidebar";
}
#media (max-width: 625px) {
.content {
width: 100%;
}
.sidebar {
width: 100%;
}
}
<div class="wrapper">
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
First i used flex-wrap to toggle between row and column as per the width of the screen. Then i used media query to change the width of the elements as you want different widths in row and column view.