How do I wrap row items using CSS Flexbox?

Question

I'm fairly new to CSS Flexbox but I'm trying to create a horizontal card, where an image is on the left, and text/buttons are on the right. When the site is scaled down (for mobile use), the row items should wrap and the image should sit on top of the text. I've tried setting the wrap property to wrap but it wraps for large screens when it should only wrap for smaller screens. See code below:

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 200px;
}

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
  width: 70%;
  margin: auto;
}

#inner-container {
  border: solid 1px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

<div id="outer-container">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
  <div id="inner-container">
    <div>
      <h3>Heading</h3>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
      Other stuff
    </div>
  </div>
</div>

Should I attempt to use another approach (like Bootstrap's card layouts) or is there something obvious I'm missing?

Answer 1

Set a flex-basis to the text container to control when the wrap should happen.

Open the below on full screen and resize to see:

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 200px;
}

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
  width: 70%;
  margin: auto;
}

#inner-container {
  border: solid 1px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  
  flex-basis:500px;
  flex-grow:1;
}

<div id="outer-container">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
  <div id="inner-container">
    <div>
      <h3>Heading</h3>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
      Other stuff
    </div>
  </div>
</div>

Answer 2

HTML:

<div id="outer-container">
  <div class="content-wrapper">
    <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
    <div id="inner-container">
      <div>
        <h3>Heading</h3>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div>
        Other stuff
      </div>
    </div>
  </div>
</div>

CSS:

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 100%;
  object-fit: cover;
}

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
  width: 70%;
  margin: auto;
}

#inner-container {
  border: solid 1px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 767px) {
  .content-wrapper {
    flex-direction: row;
  }

  img {
    width: 200px;
  }
}

Answer 3

Assuming I understood your question correctly, I believe I've come up with something that resembles a solution.

I altered your code ever so slighty, and worked with the flex-direction attritube. Basically what I've done is, when you're on desktop version, your card used the attribute flex-direction: row to have your items inside of your div be aligned like you described.

When you swicth to mobile version, the only thing I've done is add a media query that tells the div to use the flex-direction: column, in order to have the items inside you div be aligned like you described.

In this solution, you avoid switching to Bootstrap, by utilizing flexbox and the use of media queries like @DevLover mentioned.

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 200px;
}

#outer-container {
  display: flex;
  border: solid 1px;
  width: 70%;
  flex-direction: row;
}

#inner-container {
  border: solid 1px;
}

@media only screen and (max-width: 768px) {
    #outer-container {
        flex-direction: column;
    }
  }

<div id="outer-container">
        <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
        <div id="inner-container">
            <h3>Heading</h3>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <div>
                Other stuff
            </div>
        </div>
    </div>

I hope this solves your issue!

Answer 4

The image is on the left.

The text is on the right.

As soon as the first line of text reaches the right side of the container, the entire item will wrap.

It's tempting to think that once the first line reaches the right-side limit, just the text will wrap.

That's not how it works.

That touch will trigger the entire item to wrap.

Try it out: jsFiddle demo

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
}

#inner-container {
  border: solid 1px;
  display: flex;
  min-width: 0;
}

<div id="outer-container">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" width=50 height=50 alt="cat">
  <div id="inner-container">
    <p>Re-size the screen. Once this text touches the right side, the item will wrap.</p>
  </div>
</div>

Use a media query to control the wrapping behavior.