Move HTML blocks to different order for responsive design

Question

I need a pure CSS option to move something so it appears to be underneath a section of content only on particular widths.

I already have stylesheets set up for the breakpoints so can apply specific styling to my mobile width.

The page is a repeater of items each with a number, body text and icon. They alternate, the HTML goes from showing the icon on the left to showing the icon on the right. It needs to be this way, and cannot be floated, due to expansion of content and being repsonsive

Here is an example of the output on a desktop: JS Fiddle. Note it is responsive and there can be lots of text in the body text area and it will float. Perfect.

When going down to mobile, it changes a bit. The icon becomes full width and should sit UNDERNEATH the body content.

This sort of works. The problem is that the HTML shows the icon first in the DOM and then on the next repeat, it comes last.

How can I make it so that this div of icon moves location, without JavaScript? This is for mobile only, so perhaps CSS3 has a solution for this?

This is how it currently looks on mobile. You can see it is wrong, the icon needs to come underneath the text at all times. It needs to expand to the content and be completely responsive with no fixed height.

You can see that number 2, 4 etc are all correct with the icon showing underneath.

Thanks

Answer 1

Without a script, you are not going to "move HTML blocks to different order," but with some tricky CSS you can make it appear as though you have.

Take a look at my personal website nicksaemenes.com (a work in progress - to state the obvious), to see if it accomplishes what it is you are attempting — I think it does. You can find all of the source code for it here on Github.

One thing that you should look into is why your HTML is alternating the order of icon/image and paragraph. I would suggest that this is a problem and that your source order should be consistent in this case.

While not taken quite as far as my published website, this Codepen shows the early stages of development for my site that may be a bit more digestible for understanding how I accomplished what it appears to me you are after.

section:after, .tweener:after, section .info-block:after {
  content: "";
  display: table;
  clear: both;
}

section a, section:hover > div {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
section a:hover, section:hover > div:hover {
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}

html {
  color: #666;
}

h1 {
  color: #333;
  padding: 2rem;
  margin: 0;
  text-align: center;
  font-weight: normal;
}

h2 {
  color: #444;
  margin-top: 0;
}

p {
  line-height: 1.8;
}

li:after {
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.5);
  content: "Nick Anderson - flic.kr/ps/QG591";
  padding: .5rem 1rem .5rem .5rem;
  position: absolute;
  bottom: 1rem;
  right: 0;
  font-size: 10px;
}

/* https://stackoverflow.com/questions/20150621/sass-mixin-for-animation-keyframe-which-includes-multiple-stages-and-transform-p/23861638#23861638
animation mixing
keyframe animation
@include animation('animation-name .4s 1')*/
html {
  background: white;
  padding: 1rem;
  font-family: sans-serif;
}

section {
  background: white;
  max-width: 1024px;
  margin: auto;
  /* The Holy Grail of CSS Centering - http://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114 */
}
section a {
  color: #666;
  text-decoration: none;
  padding: 1rem;
  border: 1px solid;
  float: left;
}
section a:hover {
  background: #111;
  border-color: transparent;
  color: white;
  opacity: .75;
}
section img {
  width: 100%;
}
section p {
  margin-top: 0;
  text-align: left;
}
section .contained {
  height: 70%;
  margin: auto;
  width: 100%;
}
section .outer {
  display: table;
  height: 100%;
  width: 100%;
  word-spacing: -1rem;
}
section .inner {
  display: table-cell;
  vertical-align: middle;
}
section .centered {
  display: inline-block;
  float: left;
  position: relative;
  width: 100%;
}
section:hover > div {
  opacity: .5;
}
section:hover > div:hover {
  opacity: 1;
}

/* The "Tweener" ... My addition to allow for cross-browser support of alternating element alignment of non-css-class-ified elements*/
.tweener {
  direction: ltr;
  display: inline-table;
  height: auto;
  width: 50%;
  word-spacing: normal;
}
.tweener .inner {
  width: 100% !important;
}

/*.tweener:nth-of-type(odd) .centered > * {
  @include box-shadow(0 5px 1px -3px rgba(0,0,0,.2));
}*/
.text-block {
  width: 80%;
  float: right;
}

.tweener {
  height: 100%;
  vertical-align: middle;
  width: 50%;
}

section .info-block {
  border-bottom: 1px solid #ccc;
  padding: 4rem 0;
}
section .info-block:last-of-type {
  border: none;
}
section .info-block:nth-child(2n) .outer {
  direction: rtl;
}
section .info-block:nth-child(2n) .text-block {
  float: left;
}

.video-container {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
  position: relative;
}
.video-container iframe,
.video-container object,
.video-container embed {
  border: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@-webkit-keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
@-moz-keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
@-o-keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
@keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
section ul.xfade {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 66.69922%;
  position: relative;
  width: 100%;
}
section ul.xfade li {
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}
section ul.xfade li:nth-child(3) {
  -webkit-animation: xfade 12s 0s infinite;
  -moz-animation: xfade 12s 0s infinite;
  -o-animation: xfade 12s 0s infinite;
  animation: xfade 12s 0s infinite;
}
section ul.xfade li:nth-child(2) {
  -webkit-animation: xfade 12s 4s infinite;
  -moz-animation: xfade 12s 4s infinite;
  -o-animation: xfade 12s 4s infinite;
  animation: xfade 12s 4s infinite;
}
section ul.xfade li:nth-child(1) {
  -webkit-animation: xfade 12s 8s infinite;
  -moz-animation: xfade 12s 8s infinite;
  -o-animation: xfade 12s 8s infinite;
  animation: xfade 12s 8s infinite;
}

section .info-block:nth-child(3n+2) ul.xfade li:nth-child(3) {
  -webkit-animation: xfade 12s -1s infinite;
  -moz-animation: xfade 12s -1s infinite;
  -o-animation: xfade 12s -1s infinite;
  animation: xfade 12s -1s infinite;
}
section .info-block:nth-child(3n+2) ul.xfade li:nth-child(2) {
  -webkit-animation: xfade 12s 3s infinite;
  -moz-animation: xfade 12s 3s infinite;
  -o-animation: xfade 12s 3s infinite;
  animation: xfade 12s 3s infinite;
}
section .info-block:nth-child(3n+2) ul.xfade li:nth-child(1) {
  -webkit-animation: xfade 12s 7s infinite;
  -moz-animation: xfade 12s 7s infinite;
  -o-animation: xfade 12s 7s infinite;
  animation: xfade 12s 7s infinite;
}

section .info-block:nth-child(3n+3) ul.xfade li:nth-child(3) {
  -webkit-animation: xfade 12s -2s infinite;
  -moz-animation: xfade 12s -2s infinite;
  -o-animation: xfade 12s -2s infinite;
  animation: xfade 12s -2s infinite;
}
section .info-block:nth-child(3n+3) ul.xfade li:nth-child(2) {
  -webkit-animation: xfade 12s 2s infinite;
  -moz-animation: xfade 12s 2s infinite;
  -o-animation: xfade 12s 2s infinite;
  animation: xfade 12s 2s infinite;
}
section .info-block:nth-child(3n+3) ul.xfade li:nth-child(1) {
  -webkit-animation: xfade 12s 6s infinite;
  -moz-animation: xfade 12s 6s infinite;
  -o-animation: xfade 12s 6s infinite;
  animation: xfade 12s 6s infinite;
}

<!--All photo credits go to Nick Anderson flickr.com/nickanderson33-->
<h1> A collection of techniques I've picked up and put together over the past year or so</h1>
<section>
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <ul class="xfade">
              <li><img alt="dock" src="//c4.staticflickr.com/8/7019/6562781091_0c75a135f6_b.jpg" /></li>
              <li><img alt="shack" src="//c4.staticflickr.com/8/7029/6562780531_d2a5be5157_b.jpg" /></li>
              <li><img alt="flower" src="//c3.staticflickr.com/7/6006/5988132647_94f7193719_b.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Vertical Centering</h2>
              <p>Use any amount of text and any size photo. </p>
              <p>If you shrink the window width you'll see that when the image height is smaller than the text height, the two elements will remain vertically centered with each other. </p>
              <p>This is a modified version of ... </p>
              <a href="http://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114"> The Holy Grail of CSS Centering</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <ul class="xfade">
              <li><img alt="stained glass" src="//c4.staticflickr.com/8/7358/8779551390_85fbae4bfb_h.jpg" /></li>
              <li><img alt="ring" src="//c4.staticflickr.com/8/7150/6722043431_b59b6f7d8f_b.jpg" /></li>
              <li><img alt="sunflower" src="//c3.staticflickr.com/7/6182/6085971358_25fdd877b0_b.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>
         
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Alternating Alignment of Elements</h2>
              <p>The HTML structure per row is consistent - image then text.</p>
              <p>Typically, you can accomplish the alternating alignment of elements with floats, but in this case, floating elements removes their ability to be vertically centered - Boo! </p>
              <p>Thus, I employed some ol' RTL trickery. I had to include one additional div (with the "tweener" class) to make this happen, but in the end I think it is worth it. Especially since it works in all modern browers.</p>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
           <ul class="xfade">
              <li><img alt="flooded" src="//c3.staticflickr.com/3/2264/5814476694_4ea5265e3a_b.jpg" /></li>
              <li><img alt="shooting" src="//c4.staticflickr.com/4/3237/5872035040_cfc7f77cb8_b.jpg" /></li>
              <li><img alt="truck" src="//c4.staticflickr.com/8/7358/8779551390_85fbae4bfb_h.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Pure CSS Image Rotator</h2>
              <p>I snagged the initial code from Mark Lee, then made it work for me.</p>
              <p>NOTE: If you use the CSS image rotator you'll want to make sure that your photos (of the same group) use the same aspect ratios.</p>
              <a href="http://codepen.io/leemark/pen/DvliI">Mark's Pen</a>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
		  
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="video-container">
              <iframe width="640" height="360" src="https://www.youtube.com/embed/cbSbbY5ibas?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
         
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Responsive Embedded Video</h2>
              <p>First off, both Kilian Martin and Brett Novak are incredible at what they do. Much respect.</p>
              <p>Lifted from the Smashing Magazine article describing how to make iframes responsive</p>
              <a href="http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/">Smashing Article</a>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
		  
		  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <ul class="xfade">
              <li><img alt="couple" src="//c3.staticflickr.com/7/6007/5988700008_36d5dc34a9_b.jpg" /></li>
              <li><img alt="stars" src="//c3.staticflickr.com/7/6025/5978705415_00f22c1e65_b.jpg" /></li>
              <li><img alt="lake" src="//c3.staticflickr.com/7/6012/5979259078_f4c53fee72_b.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>
         
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Different Transitions for Hover On / Hover Off</h2>
              <p>A subtle, but classy way to add that extra shine to your site is to use different transitions for hover on vs. hover off. The links in this demo have a transition duration of .1s for the hover on, but .5s for the hover off. You have to be careful with this as it can be an unexpected behavior that leads to the impression that something isn't working correctly, but I believe that misperception can only be fought with good design decisions and time. </p>
              <p>Also, if you don't know of Chris Coyier, you have either been living under a rock or you are not a web designer. </p>
              <a href="http://css-tricks.com/different-transitions-for-hover-on-hover-off/">CSS-Tricks Article</a>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
  
</section>

Answer 2

Or you can use css3 :nth-of-type selector, as well as vals' answer,

Look at this pen

(I did change your class names, but still you can follow, i think)

You can also resize the browser and see the changes via the media queries,

Answer 3

I have reproduced your fiddle HERE

You will see 6 rows, and I believe that all are behaving the same.

The first 2 are from your original example.

In the remaining 4 I have changed your original class to "row"; and I have kept always the same order. Now, the style applied to make the even rows styled different is:

Most of the trick is to use absolute position for the image, and aligning it to the right. (Most of the remaining code is your's)

.row {
    border-bottom:1px dotted #464637;
    padding-bottom:15px;
    margin-bottom:15px;
    min-height: 150px;
}

.row .views-field-field-icon{
    display:inline-block;
    width:41%;
    margin-right: 0;
}

.row:nth-child(even) .views-field-field-icon{
    position: absolute;
    right: 0px;
    padding-right: 6%;
}

Answer 4

The CSS to do the job for narrow devices would be like so:

http://codepen.io/cimmanon/pen/BJleF

.view-reasons .views-reasons-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.view-reasons .views-field-field-icon {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

Just place them within the appropriate media query. This will work for Opera, Chrome, IE10, Firefox, and pretty much every mobile browser other than Opera Mini (see: http://caniuse.com/#feat=flexbox).

Answer 5

You should be able to achieve this using flexbox and the flex-flow and order properties to change orientation and the element sequence.