NO left column on < 600px

Question

I have made a website with 2 columns. A left-column with a picture (30%) and a right-column with text (70%). Everything works fine, but at a screen with less that 600px resolution, the left-column looks ugly. I would like to leave the left-column out when the screen size is lower as 600px (not stack on each other). How can I do this?

css:
body {
    background-image: url(images/starsonblackredbg.jpg);
    }

.flex-container {
  display: flex;
  text-align: left;
}

.flex-item-left {
  flex: 20%;
    justify-content: center;
}

.flex-item-right {
  flex: 80%;
    justify-content: left;
  padding: 10px;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other*/ 
@media screen and (max-width: 600px)
{
    .flex-item-left .flex-item-right {
        width: 100%;
        padding: 0;
    }
}
HTML
<div class="row">
<div class="flex-container">
  <div class="flex-item-left"><img src="images/starswithpartialmask.jpg" class="img-left"></div>
  <div class="flex-item-right">
</h2><h4><u>Your Gateway to Exquisite Asian Products!</u></h4>
</div>
</div>

Answer 1

The left column is hidden by using display: none, and the right column takes up the full width using flex: 100% This way, when the screen size is less than 600px, the left column will be hidden, and the right column will take up the entire width of the container, resulting in a cleaner and more user-friendly layout for smaller screens.

body {
  background-image: url(images/starsonblackredbg.jpg);
}

.flex-container {
  display: flex;
  text-align: left;
}

.flex-item-left {
  flex: 30%;
  justify-content: center;
}

.flex-item-right {
  flex: 70%;
  padding: 10px;
}

/* Responsive layout - when the screen is less than 600px wide, hide the left column */
@media screen and (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }

  .flex-item-left {
    display: none;
  }

  .flex-item-right {
    flex: 100%;
  }
}