Html 在较小的屏幕尺寸下，如何使左侧的图像内容位于右侧，并具有响应性？_Html_Css_Twitter Bootstrap_Responsive

Html 在较小的屏幕尺寸下，如何使左侧的图像内容位于右侧，并具有响应性？

html css twitter-bootstrap

Html 在较小的屏幕尺寸下，如何使左侧的图像内容位于右侧，并具有响应性？,html,css,twitter-bootstrap,responsive,Html,Css,Twitter Bootstrap,Responsive,我试图创建一些东西，比如左边的图像，右边的内容，以及交替的顺序。正如你可以看到我下面的图片，第二张图片不在右边。并且在较小的屏幕尺寸上不响应。请帮忙这是我的密码： <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <

我试图创建一些东西，比如左边的图像，右边的内容，以及交替的顺序。正如你可以看到我下面的图片，第二张图片不在右边。并且在较小的屏幕尺寸上不响应。请帮忙

这是我的密码：

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

        <title>Example</title>

    <style>
    body {
      margin-top: 50px;
    }

    .img-1 {
      height: 250px;
      width: 350px;
      margin: 10px 50px;

    }


    </style>

      </head>
      <body>

        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-6" >
                  <img class="img-1" src="img-1.jpg">
                </div>
                <div class="col-md-4 col-sm-4">
                     <h3>h3 title</h3>
                    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                        Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                        augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                        tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                        massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                        eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-sm-6" >
                  <img class="img-1" src="img-1.jpg">
                </div>
                <div class="col-md-4 col-sm-4">
                     <h3 class="">h3 title</h3>
                    <p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                        Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                        augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                        tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                        massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                        eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
                </div>
            </div>
        </div>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

      </body>
    </html>


例子
身体{
边缘顶部：50px；
}
.img-1{
高度：250px；
宽度：350px；
利润率：10px 50px；
}
h3标题
在奥古斯·劳里特·鲁图姆·福西布斯·多洛尔·奥克托的带领下，人马过着幸福的生活。
精英自由主义者，法雷特拉·奥古斯。无生命的精英自由，一个法雷特拉
奥古斯。Lorem ipsum dolor sit amet，是一位杰出的献身者。Fusce dapibus，
tellus ac cursus commodo、tortor mauris调味品nibh、ut发酵液
马萨·胡斯托坐在阿梅特·里索斯旁边。为您提供最优质的服务
欧洲狮子座。在发酵罐中发酵
h3标题
在奥古斯·拉奥里特·鲁特姆·福西布斯·多洛·奥克托（faucibus dolor auctor）的山上生活。
精英自由主义者，法雷特拉·奥古斯。无生命的精英自由，一个法雷特拉
奥古斯。Lorem ipsum dolor sit amet，是一位杰出的献身者。Fusce dapibus，
tellus ac cursus commodo、tortor mauris调味品nibh、ut发酵液
马萨·胡斯托坐在阿梅特·里索斯旁边。为您提供最优质的服务
欧洲狮子座。在发酵罐中发酵

在较小的屏幕上，这是不响应的，我如何修复它

非常感谢你的帮助

要切换顺序，使图片位于右侧，在第二行中，第一个div和class=“col-md-6 col-sm-6”应包含h3和p，然后该行中第二个div和class=“col-md-4 col-sm-4”应包含img。若要使图像具有响应性，请在img标记中添加“img responsive”类，并将CSS中定义的高度和宽度设置为最大高度或最大宽度，以便图像可以缩小到较小的高度/宽度，以适应较小的屏幕。

若要切换顺序，则图片位于右侧，在第二行的第一个div中显示该类=“col-md-6 col-sm-6”应该包含h3和p，然后该行中class=“col-md-4 col-sm-4”的第二个div应该包含img。要使图像具有响应性，请添加“img responsible”“在img标签中分类，并将您在CSS中定义的高度和宽度设置为最大高度或最大宽度，以便图像可以缩小到较小的高度/宽度以适应较小的屏幕。

使用可以使用

.col sm push-*

和

.col sm pull-*切换网格列的顺序。”。以下是参考资料：

要使图像具有响应性，请在img标记中添加“img responsive”类

.img-1{
边缘底部：20px；
}


h3标题
在奥古斯·劳里特·鲁图姆·福西布斯·多洛尔·奥克托的带领下，人马过着幸福的生活。
精英自由主义者，法雷特拉·奥古斯。无生命的精英自由，一个法雷特拉
奥古斯。Lorem ipsum dolor sit amet，是一位杰出的献身者。Fusce dapibus，
tellus ac cursus commodo、tortor mauris调味品nibh、ut发酵液
马萨·胡斯托坐在阿梅特·里索斯旁边。为您提供最优质的服务
欧洲狮子座。在发酵罐中发酵
h3标题
在奥古斯·拉奥里特·鲁特姆·福西布斯·多洛·奥克托（faucibus dolor auctor）的山上生活。
精英自由主义者，法雷特拉·奥古斯。无生命的精英自由，一个法雷特拉
奥古斯。Lorem ipsum dolor sit amet，是一位杰出的献身者。Fusce dapibus，
tellus ac cursus commodo、tortor mauris调味品nibh、ut发酵液
马萨·胡斯托坐在阿梅特·里索斯旁边。为您提供最优质的服务
欧洲狮子座。在发酵罐中发酵

Use可以使用

.col-sm-push-*

和

.col-sm-pull-*切换网格列的顺序。以下是参考资料：

要使图像具有响应性，请在img标记中添加“img responsive”类

.img-1{
边缘底部：20px；
}


h3标题
在奥古斯·劳里特·鲁图姆·福西布斯·多洛尔·奥克托的带领下，人马过着幸福的生活。
精英自由主义者，法雷特拉·奥古斯。无生命的精英自由，一个法雷特拉
奥古斯。Lorem ipsum dolor sit amet，是一位杰出的献身者。Fusce dapibus，
tellus ac cursus commodo、tortor mauris调味品nibh、ut发酵液
马萨·胡斯托坐在阿梅特·里索斯旁边。为您提供最优质的服务
欧洲狮子座。在发酵罐中发酵
h3标题
在奥古斯·拉奥里特·鲁特姆·福西布斯·多洛·奥克托（faucibus dolor auctor）的山上生活。
精英自由主义者，法雷特拉·奥古斯。无生命的精英自由，一个法雷特拉
奥古斯。Lorem ipsum dolor sit amet，是一位杰出的献身者。Fusce dapibus，
tellus ac cursus commodo、tortor mauris调味品nibh、ut发酵液
马萨·胡斯托坐在阿梅特·里索斯旁边。为您提供最优质的服务
欧洲狮子座。在发酵罐中发酵

看看这是否有帮助

请点击链接查看其工作原理

HTML:

看看这是否有帮助

请点击链接查看它是如何运行的

<img class="img-1" src="img-1.jpg" width="350px" height="250px">
     <div id="container">
     <h3>h3 title</h3>
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                    augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                    tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                    massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                    eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
                    </div>

<div id="container2">
<img class="img-1" src="img-1.jpg"  width="350px" height="250px">

   <h3 class="">h3 title</h3>
       <p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                    augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                    tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                    massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                    eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
  </div>

 body {
  margin-top: 50px;
}

.img-1 {
  border: 1px solid black;
  max-width: 50%;
  margin: 10px 50px;

}

@media only screen and (min-width:768px) {
img {float: left;}
#container2 {clear: left;}
}