Should I use javascript for this responsive design?

Question

I am working on rebuilding my personal site and I have two elements which are floated side by side first at 80% and second at 20%.

http://codepen.io/anon/pen/xgask

SCSS

.container
  width: 80%
  margin: 0 auto
  outline: 2px solid green
  overflow: hidden /* Only used this here as a clearfix */

.text, .avatar
  float: left

.text
  width: 70%
  outline: 1px solid red

.avatar
  width: 25%
  margin-left: 5%
  outline: 1px solid blue

  img
    display: block
    max-width: 100%

HTML

<div class="container">
  <div class="text">
    <p>Lots of text ...<p>
    <p>Lots of text ...</p>
  </div>
  <div class="avatar">
    <img src="http://www.foxprime.net/wp-content/uploads/2013/08/gravity-max-roller-coaster.jpg" />
  </div>
</div>

On desktop sizes that is perfect. If the text in the first element is longer than the picture in the second the text does not wrap underneath which is what I want.

However, on mobile sizes I wish the text element to be full width and the picture to float right so the text wraps around.

With two separate elements as they are this is impossible, so is it appropriate to use javascript with something like enquire.js to react to the media query which then detaches the picture and places it at the beginning of the text element and have a style to float it right.

I know how to code it all, no problems there, just asking if it is appropriate to use a tiny bit of javascript to assist me getting the responsive layout I want?

Answer 1

With Responsive Web Design, there are many ways to accomplish the same thing; No one way is right.

Personally, I would try to work out a CSS-only solution or a solution that reorganizes my HTML markup to the best of my ability to reach the desired result. Only if I've exhausted all options in to making a CSS/Markup-only solution work would I turn to JavaScript.

In other words, yes, JavaScript is appropriate if it reaches your end result. However, if it's possible via Markup/CSS manipulation and no JavaScript, that is always the better choice.

Answer 2

If you don't mind putting the .avatar column first, you can get the exact results you want. Otherwise, I'd just hide and show with css, if it's just one image. Usually I avoid using jQuery unless it's absolutely necessary and after 3 years of responsive stuff, you get to know when to use it and when not to use it.

http://codepen.io/anon/pen/nfvmj

This is mobile first.

Put the .avatar before the .text in the html:

.container {
    margin: 0 auto;
    width:90%;
    outline: 2px solid green;
      overflow: hidden;
        /* Only used this here as a clearfix */
}
.text {
    outline: 1px solid red
}
.avatar {
    float: right;
    width: 50%;
    margin:0 0 2% 2%;
}
.avatar img {
    max-width: 100%
}
@media (min-width:600px) { 
    .text {
        width: 70%;
        float: left;
    }
    .avatar {
        float: right
    }
    .container {
        width: 80%;
    }
    .avatar {
        width: 25%;
        margin: 0 0 0 5%;
    }
}