CSS flexbox question: two column mobile resposnive-CodePudding

I am trying to float an image to the left and add a fontawesome UL LI list to the right-hand side of the image. This would need to also be responsive so that in a mobile view the image would go on top and the UL LI list would go underneath.

My process is to use flexbox and use two columns. This is all simple enough but my questions are:

Is my approach a "good one"; and
How do I make the left column (in flexbox) have 30% of the entire width or 200px long (for the image)?

Here's the CSS

.some-page-wrapper {
  margin: 15px;
  background-color: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
  background-color: green;
  height: 100px;
}

And here's the HTML

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        IMAGE would go here...
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
      UL LI would go here
      </div>
    </div>
  </div>
</div>

Thanks for all pointers and help...

CodePudding user response：

I think your approach is perfectly fine.
I might be wrong, but here's my recommendation. I believe the best way would be to use grid, which allows for percentages in taking up space, and then use a media query to switch over to flexbox at mobile widths:

.some-page-wrapper {
  margin: 15px;
  background-color: red;
}

.row {
  display: grid;
  grid-template-columns: 30% 1fr;
  /* or for your 200px approach:
  grid-template-columns: 200px 1fr; */
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
  background-color: green;
  height: 100px;
}

@media only screen and (max-width: 480px) {
  .row {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
  }
}

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        IMAGE would go here...
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        UL LI would go here
      </div>
    </div>
  </div>
</div>

CodePudding user response：

I would adjust some HTML and CSS.
HTML:

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column blue'> <!-- use blue class css -->
      <div class='blue-column'> <!-- remove blue-column class css-->
        IMAGE would go here...
      </div>
    </div>
    <div class='column green'> <!-- use green class css -->
      <div class='green-column'> <!-- remove green-column class css-->
      UL LI would go here
      </div>
    </div>
  </div>
</div>

CSS:

.column {
  display: flex;
}

.blue {
  background-color: blue;
  height: 100px;
  min-width: 200px;
  flex: 0.3;
}

.green {
  background-color: green;
  height: 100px;
  flex: 1;
}

Here is my code pen: