需要＆＃39;图片＆＃39;在左边和＆＃39;文字＆＃39;在桌面上和右边; ＆＃39;文本＆＃39;在顶部和＆＃39;图片＆＃39;在移动文本下

Question

假设Text = T，Image = M

桌面订单：

[[ 0.  0.  1.]
 [ 0.  1.  0.]
 [ 1.  0.  0.]]

需要移动订单：

M T

我需要桌面和移动设备上的响应行为。

＆＃13;

＆＃13;

T

M

＆＃13;

.container{width:100%;} 
 #image {width:50%;}
  #content{width:50%;}
   #image {
    float: left !important;
  } 
  #content {  
    float: right !important; 
  }
@media only screen and (max-width: 480px) {
  .container{width:100%;}
 #image {width:50%}
  #content{width:50%}
  
  #image {
    float: right !important;
  } 
  #content {
    float: left !important;
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

选项（A。） 优先。你的CSS代码非常混乱。我把它清理了一下。每次要添加样式时，都不必编写元素。例如，你不必写#image{float:left;}，然后再写#image{ width:50%}，你可以在同一个元素上写多个样式，如`#image {float：left; width：50％} < / p>

秒如果您可以更改HTML结构，请在HTML中将#content移到#image之上。因此，通过添加float:right，文字将保留在图片的右侧，然后在移动设备上，width:100%它将保留在图片的顶部。

＆＃13;

＆＃13;

.container{
  floaT:left;
  width:100%;
  } 
 #image {
   width:49%;
   float: left ;
   margin-right:2%;
   }
#image img {
  max-width:100%;
  }
  #content{
  float:right;
  width:49%;
  }


@media only screen and (max-width: 480px) {

#image,#content  {
  width:100%;
  margin:0;
  }
 
 
}

＆＃13;

<div class="container">
  <div class="row">
  <div id="content" class=""> 
    text texttexttexttexttexttexttexttext
      texttexttexttexttexttext
    </div>
    <div id="image" class=""> 
<img src="http://placehold.it/350x150">
    </div>
    

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

OPTION（B。） 与JQ （如果您无法更改html结构）：当$(window).width()小于{{1 }}，在480px

之前移动#content

请参阅下面的代码段或jsfiddle - ＆gt;的 OPTION B

＆＃13;

＆＃13;

#image

＆＃13;

$(window).on("resize",function(){
   if($(window).width() < 480) {
   $('#content').insertBefore('#image')
   }
   })

＆＃13;

.container{
  floaT:left;
  width:100%;
  } 
 #image {
   width:49%;
   float: right ;
   margin-right:2%;
   }
#image img {
  max-width:100%;
}
  #content{
    float:right;
    width:49%;}


@media only screen and (max-width: 480px) {

#image,#content  {
  width:100%;
  margin:0;
  }
 
 
}

＆＃13;

＆＃13;

＆＃13;

上面的解决方案使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div id="image" class=""> <img src="http://placehold.it/350x150"> </div> <div id="content" class=""> text texttexttexttexttexttexttexttext texttexttexttexttexttext </div> </div> </div>，因此在您调整浏览器大小时它可以正常工作。如果您不想要，请将其删除，然后使用$(window).on("resize",function(){或$(window).load(function(){。

Answer 2

您可以使用flex属性。

<div class="container">
  <div class="row flex-property">
    <div id="image" class="">
      <img src="http://static.adzerk.net/Advertisers/fdec4733b4814d9e958b7f86c25020b5.jpg">
    </div>
    <div id="content" class="">
      text texttexttexttexttexttexttexttext texttexttexttexttexttext
    </div>
  </div>
</div>

@media only screen and (max-width: 480px) {
    #image,
    #content {
        width: 100%;
    }
    #content {
        margin-bottom: 20px;
    }
    .flex-property {
        display: flex;
        flex-direction: column-reverse;
    }
}