Css 在窗口调整大小时垂直移动div块

我试图做如下的事情，但是用两块文本，而不是一个图像和一些文本

我试图有两个文本块，水平相邻，但当窗口变小时，让右侧的文本移到左侧文本的下方

页面im编辑在这里：

希望有人能帮忙

<div class='wrapper'>
<img/>
<div class='content'>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

这包含一个简单的技术示例。您将需要一些媒体查询来将容器的宽度调整为将列分隔为不同行的最小宽度

您只需将它们设置为display:block，向左浮动并给它们一个宽度

.content{
    float:left;
    display:block;
    width: 50%;
    min-width: 200px;
}

这包含一个简单的技术示例。您将需要一些媒体查询来将容器的宽度调整为将列分隔为不同行的最小宽度

您只需将它们设置为display:block，向左浮动并给它们一个宽度

.content{
    float:left;
    display:block;
    width: 50%;
    min-width: 200px;
}

必须将

左

文本包装在一个包装器中，以便它能够自己浮动。工作出色

CSS: HTML:

Lorem Ipsum左边的哥哥。。。
Lorem Ipsum只是。。。

使用

@media

查询此项

必须将

左

文本包装在一个包装器中，以便它能够自己浮动。工作出色

CSS: HTML:

Lorem Ipsum左边的哥哥。。。
Lorem Ipsum只是。。。

---

使用

@media

查询此项。

使用

浮动：左

仅在

'img'

标记中

使用

浮动：左

仅在

'img'

标记中

.content {
    font-weight: bold;
    font-size: 150%;
    border:1px solid red;
}
@media (max-width: 539px) {
    .content, .left {
        float: none;
        display: block;
        width: 100%;
    }
}
@media (min-width: 540px) {
    .content, .left {
        float:left;
        display:inline-block;
        min-width:200px;
    }
    .content {
        box-sizing: border-box;
        max-width:60%;
    }
    .left {
        max-width: 40%;
    }
}

<div class='wrapper'>
    <div class='left'>Lorem Ipsum's brother on his left...</div>
    <div class='content'>Lorem Ipsum is simply...</div>
</div>