Mr7-itsurdeveloper Mr7-itsurdeveloper - 3 months ago 10
CSS Question

Need 'picture' on left and 'text' on right on desktop & 'text' on top and 'picture' under the text on mobile

Suppose Text =T

IMAGE =M

DESKTOP ODER

M T

NEED MOBILE ODER

T

M

NEED RESPONSIVE ON DESKTOP &MOBILE,Please help me out ,thanks



.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;
}
}

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

</div>
</div>




Answer

OPTION (A.) first. your CSS code was very messy. i cleaned it up a bit. you don't have to write the element every time you want to add a style to it. for example you don't have to write #image{float:left;} and then again #image{ width:50%} , you can write multiple styles on the same element like so `#image { float:left;width:50%}

second IF you can change your HTML structure, move #content above #image in the HTML. and so, by adding float:right the text will stay on the right of the image, and then on mobile , with width:100% it will stay on top of the image.

.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;
  }
 
 
}
<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>

OPTION (B.) with JQ ( if you can't change the html structure ) : when $(window).width() is smaller than 480px , move #content before #image

see snippet below or jsfiddle - > OPTION B

$(window).on("resize",function(){
   if($(window).width() < 480) {
   $('#content').insertBefore('#image')
   }
   })
.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;
  }
 
 
}
<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>

The solution above uses $(window).on("resize",function(){ , so it works when you resize the browser. if you don't want that, just remove it and use $(window).load(function(){ or $(document).ready(function(){ instead.