CSS flexbox, positioning-CodePudding

Мaybe this question will sound like a stupid, but i am new to HTML coding. For example, I want to make a row like this...

But so that the right side is outside the container and the left side stays in the container. And make it so that with the screen width on phones, the right side goes to the next line, like here...

I was able to exit from the container by using absolute positioning, but I need to do it responsive for all devices.

CodePudding user response：

Using flex without using @media:

.parent {
  display: flex;
  flex-wrap: wrap;
}
.parent > * {
  flex: 1 1 0;
  min-width: 800px;
}

Assuming an HTML code like this:

<div >
  <div >
    <h1>
      Lorem ipsum dolor
    </h1>
    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
  </div>
  <div >
    img
  </div>
</div>

So:

Make a flex box.
Wrap the flex box tiles.
Set a minimum width for each tile.

That implies: when the tiles can't shrink, they wrap (moving the second tile to the next line).

CodePudding user response：

It's very easy with Flex. Make a parent div then add two child div. For example-

.parent {
  display: flex;
  align-items: center;
}
.first-child, .second-child{
  width: 50%;
}

<div >
  <div >
    <h1>This is my first headline</h1>
    <p>Paragraph </p>
  </div>
  <div >
    <img src="https://images.pexels.com/photos/4580330/pexels-photo-4580330.jpeg" width="100%" alt="">
  </div>
</div>

CodePudding user response：

Use Bootstrap 5.

Read into:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >
  <div >
  <div >
    <h2>Lorem, ipsum, dolor.</h2>
    <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.</p>
  </div>
  <div ><img src="https://dummyimage.com/800x400/ebebeb/000000" ></div>
  </div>
</div>